grid layoutの基本

備忘録

デモ（JSFiddle)

グリッドコンテナ

.wrapper {
  display: grid;
}

display: gridかdisplay: inline-gridを指定することで、指定された要素がグリッドコンテナーになる。
また、グリッドコンテナーの子要素が全てグリッドアイテムになる。

行と列の定義

grid-template-columnsとgrid-template-rowsでグリッドコンテナ内に行と列を定義する。

• 行200px 列200px のグリッドを１つ作った場合

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 200px;
  grid-template-rows: 200px;
}

• 行200px 列200px のグリッドを4つ作った場合

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 200px 200px 200px 200px;
}

• グリッドのサイズ指定
  グリッドの行と列のサイズ指定にはfr単位を使用するのが一般的らしい。

グリッドには、柔軟なグリッドトラックを作成できるようにするため、追加の長さの単位が導入されています。新しい fr 単位は、グリッドコンテナー内の利用可能な空間の分数 (a fraction) を表します。 引用：MDN - fr単位

• グリッドの列挙
  グリッドを数多く列挙したい場合にはrepeat()を使用する。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

上記のgrid-template-columns: repeat(3, 1fr)はgrid-template-columns: 1fr 1fr 1frと同義。

• 暗黙的なグリッド
  下記のようにgrid-template-columnsで列のみを指定した場合、暗黙的に行が生成される。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

このような場合、grid-auto-rows（またはgrid-auto-columns）で暗黙的に生成されたグリッドのサイズを指定することができる。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
 }

グリッドの始線と終線

グリッドを定義すると、同時にグリッドはアイテムの配置に使用する番号のついた線が定義される。
各グリッドにgrid-column-startとgrid-column-endまたはgrid-row-startとgrid-row-endを設定することで、グリッドの始線と終線を設定できる。

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
 }

.one {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
 }
 
 .two {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
 } 

• start / end の短縮記法
  grid-rowまたはgrid-columnで短縮して記述することができる。

.one {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
 }

と

.one {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
 }

は同義

詳細

developer.mozilla.org