レスポンシブスクエアのグリッド

Question

レスポンシブスクエアを使ってレイアウトを作成する方法について考えています。それぞれの正方形は、垂直方向と水平方向に整列という内容になります。具体例を以下に示します。

Answer 1

あなたは正方形のレスポンシブグリッド垂直および水平方向中心のコンテンツ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%

---

2.四角の中にコンテンツを追加する

四角形の中に直接コンテンツを追加することはできません（高さを拡大し、四角形はもう四角形にはなりません）ので、position: absolute;を使用して子要素（この例ではdivを使用）を作成し、内容を配置する必要があります。それら。これにより、コンテンツがフローから除外され、正方形のサイズが維持されます。

忘れないでください親のdivにposition:relative;を追加して、絶対的な子がその親に対して相対的に配置/サイズ変更されるようにします。

3×3のマス目にいくつかのコンテンツを追加しましょう。

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%;
}

RESULT < - きれいにするためのフォーマット

---

3.コンテンツをセンターする

横：

これは非常に簡単です。text-align:centerに.contentを追加するだけです。
RESULT

縦位置

これは深刻になります！トリックは使用することです

display:table;
/* and */
display:table-cell;
vertical-align:middle;

butdisplay:table;または.square divに.contentを使用することはできません。position:absolute;と競合するため、.content div内に2つの子を作成する必要があります。私たちのコードは以下のように更新されます。

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%;
}

---

これで作業は終了しました。ここで結果を確認できます。

LIVE FULLSCREEN RESULT

ここで編集可能な操作

---

Answer 2

画面の幅に応じて正方形を反応させるvw（view-width）単位を使うことができます。

これの簡単なモックアップは次のようになります。

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>

Answer 3

受け入れられた答えは素晴らしいです、しかしこれはflexboxですることができます。

これは BEM構文 で書かれたグリッドシステムで、1行に1〜10列を表示できます。

最後の行が不完全な場合（たとえば、1行に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%;
}

.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%;
}

<div class='square-grid'>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
</div>

フィドル： https://jsfiddle.net/patrickberkeley/noLm1r45/3/

これはFFとChromeでテストされています。

Answer 4

私はsimpleGridと呼ばれるライブラリを書きました。パフォーマンスの問題なしに、あらゆる量のアイテムを処理できます。 1行あたりの項目数を自動的に調整します。

各項目に特定の縦横比を設定したい場合は、 トリック を使う必要があります。簡単です。

Answer 5

私はこのソリューションを異なる配給のレスポンシブボックスに使っています。

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%; }

デモを見る JSfiddle.net