CSS
グリッド

前書き

備考

基本的な例

CSSグリッドは表示プロパティとして定義されています。これは、親要素とその直下の子にのみ適用されます。

次のマークアップを考えてみましょう。

<section class="container">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
</section>

上記のマークアップ構造をグリッドとして定義する最も簡単な方法は、単にdisplayプロパティをgrid設定することgrid 。

.container {
  display: grid;   
}

しかし、これを行うと、必ずすべての子要素が互いに重なり合うようになります。これは、子供たちが現在どのように自分自身をグリッド内に配置するかを知らないためです。しかし、明示的に言えます。

最初に、グリッド要素の.container構造体を構成する行と列の数を伝える必要があります。グリッドgrid-columnsとgrid-rowsプロパティを使用してこれを行うことができます（複数形に注意してください）。

.container {
  display: grid;
  grid-columns: 50px 50px 50px;
  grid-rows: 50px 50px;
}

しかし、各子要素に順序を与える必要があるので、それはまだ私たちを助けません。これを行うには、 grid-rowに置かれている場所を示すgrid-rowとgrid-column値を指定します。

.container .item1 {
  grid-column: 1;
  grid-row: 1;
}
.container .item2 {
  grid-column: 2;
  grid-row: 1;
}
.container .item3 {
  grid-column: 1;
  grid-row: 2;
}
.container .item4 {
  grid-column: 2;
  grid-row: 2;
}

各項目に列と行の値を与えることによって、コンテナ内の項目の順序を識別します。

JSFiddleの実例を見てください 。あなたはそれを動作させるために、これらは、現在（ベンダープレフィックスを持つグリッドレイアウトサポートする唯一のブラウザであるようIE10、IE11またはエッジでこれを確認する必要があります-ms-によるとクローム、オペラとFirefoxで）またはフラグを有効caniuseために、それらと一緒にテストする。