レイアウトをどうやって作成すればいいのか知りたいですレスポンシブスクエアそれぞれの正方形には垂直と水平に整列内容。具体的な例を以下に示します。
ベストアンサー1
新しいソリューション（2022）
この回答が書かれてから CSS は変更されました。現在では、正方形グリッドのコードを大幅に簡素化できるプロパティがいくつかあります。
- のグリッドグリッドレイアウトを処理するプロパティ（MDNリファレンス）
- のアスペクト比各グリッドアイテムの正方形のアスペクト比を処理するプロパティ（MDNリファレンス）
- のオブジェクトフィット画像の中央揃えと正方形を覆うかどうかを制御するプロパティ（MDNリファレンス）
以下に例を示します。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2%;
}
.square {
aspect-ratio: 1/ 1;
display: flex;
align-items: center;
padding: 5%;
background-color: #1E1E1E;
color: #fff;
}
.square img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.square.fullImg {
padding: 0;
}
.square.fullImg img {
object-fit: cover;
}<div class="grid">
<div class="square">
<ul>This demo shows you can center multiple types of content :
<li>Text</li>
<li>Images</li>
<li>Lists</li>
</ul>
</div>
<div class="square">98%</div>
<div class="square">3.9/5</div>
<div class="square"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
<div class="square"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
<div class="square"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
<div class="square fullImg"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
<div class="square fullImg"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
<div class="square fullImg"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
</div>前の回答
これはまだ機能しますが、CSS は作成されてから変更されており、新しいプロパティにより、コードが簡素化され、理解しやすくなります。
あなたは作ることができますレスポンシブな正方形のグリッド垂直と水平に中央揃えのコンテンツのみCS手順を追って説明しますが、まず、実現可能な内容のデモを 2 つ紹介します。
それでは、これらのおしゃれなレスポンシブな正方形の作り方を見てみましょう。
1. レスポンシブスクエアの作成:
要素を正方形（またはその他のアスペクト比）に保つためのコツは、パーセントを使用することですpadding-bottom。
補足: 上部パディングや上部/下部マージンも使用できますが、要素の背景は表示されません。
上部のパディングは、親要素（参考としてMDNを参照）要素の高さは幅に応じて変化します。これでアスペクト比を維持する幅に応じて異なります。
この時点で次のようにコーディングできます。
html:
<div></div>
CS:
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
がここにありますシンプルなレイアウトの例上記のコードを使用して 3 x 3 の正方形グリッドを作成します。
このテクニックを使用すると、他のアスペクト比も作成できます。次の表は、アスペクト比と 30% の幅に応じた下部パディングの値を示しています。
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
2. 四角の中にコンテンツを追加する:
四角形の内部に直接コンテンツを追加することはできないため (高さが拡張され、四角形が四角形ではなくなります)、四角形の内部に子要素 (この例では div を使用しています) を作成しposition: absolute;、その中にコンテンツを配置する必要があります。これにより、コンテンツがフローから除外され、四角形のサイズが維持されます。
忘れないで親 div に追加してposition:relative;、絶対子要素が親要素に対して相対的に配置/サイズ調整されるようにします。
3x3 の正方形のグリッドにコンテンツを追加してみましょう。
html:
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
CS:
.square {
float: left;
position: relative;
width: 30%;
padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
margin: 1.66%;
overflow: hidden;
}
.content {
position: absolute;
height: 80%; /* = 100% - 2*10% padding */
width: 90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
結果<-- きれいにするために少し書式設定します。
3. コンテンツを中央揃えにする:
水平方向：
text-align:centerこれは非常に簡単で、を追加するだけです.content。
結果
垂直方向の配置:
これは深刻です！コツは
display: table;
/* and */
display: table-cell;
vertical-align: middle;
しかしdisplay:table;on.squareまたは.contentdivs は競合するため使用できないため、divsposition:absolute;内に 2 つの子を作成する必要があります.content。コードは次のように更新されます。
html:
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell">
... CONTENT HERE ...
</div>
</div>
</div>
</div>
... and so on 9 times for 9 squares ...
CS:
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
これで完了です。結果をここで確認できます。