レスポンシブな正方形のレイアウトを作成するにはどうすればよいのでしょうか。各正方形には、垂直方向と水平方向に配置されたコンテンツがあります。具体的な例を以下に示します...
回答:
CSSのみを使用して、垂直方向と水平方向に中央揃えされたコンテンツを持つ正方形のレスポンシブグリッドを作成できます。手順を追って手順を説明しますが、最初に達成できることの2つのデモを示します。
これらの派手なレスポンシブスクエアを作成する方法を見てみましょう！
要素を正方形（または他のアスペクト比）に保つ秘訣は、パーセントを使用することpadding-bottomです。
補足：上パディングまたは上/下マージンも使用できますが、要素の背景は表示されません。
上部パディングは親要素の幅に応じて計算されるため（参照についてはMDNを参照）、要素の高さはその幅に応じて変化します。これで、幅に応じてアスペクト比を維持できます。
この時点で、次のようにコーディングできます。
HTML：
<div></div>CSS
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
ここで、簡単なレイアウト例上記のコードを使用して、3×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%
正方形の中に直接コンテンツを追加することはできないため（正方形の高さは拡張され、正方形は正方形ではなくなります）、子要素（この例ではdivを使用しています）を作成しposition: absolute;、その中にコンテンツを配置する必要があります。これにより、フローからコンテンツが取り出され、正方形のサイズが維持されます。
position:relative;絶対子が親に対して相対的に配置/サイズ設定されるように、親div を追加することを忘れないでください。
3x3の正方形のグリッドにコンテンツを追加してみましょう。
HTML：
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
CSS：
.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%;
}
結果 <-それをきれいにするためにいくつかのフォーマットを使って！
水平方向：
これは非常に簡単で、に追加text-align:centerするだけです.content。
結果
垂直方向の配置
これは大変です！トリックは使用することです
display:table;
/* and */
display:table-cell;
vertical-align:middle;
しかし、我々は使用できないdisplay:table;の.squareか.content、それはと競合するためのdiv position:absolute;我々は内部の2人の子供を作成する必要があるので、.contentdivを。コードは次のように更新されます。
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 ...
CSS：
.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%;
}
これで完了です。結果をここで確認できます。
* { box-sizing: border-box; }場合は、.content divの高さと幅を100％に調整する必要があります。:)
justify-content: center; align-items: center; flex-flow: column nowrap;
画面の幅に応じて正方形を反応させるvw（ビュー幅）単位を使用できます。
これの簡単なモックアップは次のようになります：
html,
body {
margin: 0;
padding: 0;
}
div {
height: 25vw;
width: 25vw;
background: tomato;
display: inline-block;
text-align: center;
line-height: 25vw;
font-size: 20vw;
margin-right: -4px;
position: relative;
}
/*demo only*/
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
background: rgba(200, 200, 200, 0.6);
transition: all 0.4s;
}
div:hover:before {
background: rgba(200, 200, 200, 0);
}<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>margin-left: -4px;使用しないでくださいmargin-right:-4px。むしろ、mincharspaceの不整合を台無しにするのではなく、ラッパーの親font-sizeを0に設定し、子要素の場合は1rem（relative-em）にリセットする
受け入れられた答えは素晴らしいですが、これはで行うことができますflexbox。
これは、行ごとに1〜10列を表示できるBEM構文で記述されたグリッドシステムです。
最後の行が不完全な場合（たとえば、行ごとに5つのセルを表示するように選択し、7つのアイテムがある場合）、後続のアイテムは水平方向の中央に配置されます。後続項目の水平方向の配置を制御するには、クラスのjustify-contentプロパティを変更するだけ.square-gridです。
.square-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.square-grid__cell {
background-color: rgba(0, 0, 0, 0.03);
box-shadow: 0 0 0 1px black;
overflow: hidden;
position: relative;
}
.square-grid__content {
left: 0;
position: absolute;
top: 0;
}
.square-grid__cell:after {
content: '';
display: block;
padding-bottom: 100%;
}
// Sizes – Number of cells per row
.square-grid__cell--10 {
flex-basis: 10%;
}
.square-grid__cell--9 {
flex-basis: 11.1111111%;
}
.square-grid__cell--8 {
flex-basis: 12.5%;
}
.square-grid__cell--7 {
flex-basis: 14.2857143%;
}
.square-grid__cell--6 {
flex-basis: 16.6666667%;
}
.square-grid__cell--5 {
flex-basis: 20%;
}
.square-grid__cell--4 {
flex-basis: 25%;
}
.square-grid__cell--3 {
flex-basis: 33.333%;
}
.square-grid__cell--2 {
flex-basis: 50%;
}
.square-grid__cell--1 {
flex-basis: 100%;
}
フィドル：https : //jsfiddle.net/patrickberkeley/noLm1r45/3/
これはFFとChromeでテストされています。
このソリューションは、さまざまな配給のレスポンシブボックスに使用します。
HTML：
<div class="box ratio1_1">
<div class="box-content">
... CONTENT HERE ...
</div>
</div>CSS：
.box-content {
width: 100%; height: 100%;
top: 0;right: 0;bottom: 0;left: 0;
position: absolute;
}
.box {
position: relative;
width: 100%;
}
.box::before {
content: "";
display: block;
padding-top: 100%; /*square for no ratio*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }