Gridレイアウト

無駄なDiv要素も極力増やさずに自由なレイアウトが出来ます。
手順は、親要素を格子状に分割して領域を作り、その領域に子要素を配置していく流れです。

Flexbox記事書きました

用語

Gridコンテナ

親要素
display: grid; または display: inline-grid; を指定します。

Gridアイテム

子要素
Gridコンテナの直接の子要素です。

ライン

グリッドを分ける垂直、水平の格子線です。
グリッドの上下左右それぞれの両端にも存在します。
上と左から1から順に正の番号が振られます。
下と右からは-1から順に負の番号が振られています。
※0という番号のラインはありません。

トラック

Gridコンテナをラインで区切ってできた行や列です。

セル

ラインで区切られた最小の単位です。

エリア

セルが結合してできる1つ以上のセルの集まりです。
エリアには名前を付けることができ、アイテムを配置できます。

格子を作る

Gridコンテナに指定
Gridレイアウトでは、まずGridコンテナを区切ってセルを作る必要があります。

プロパティ	内容
grid-template-rows	行のトラックの高さを半角スペースで区切って指定
grid-template-columns	列のトラックの幅を半角スペースで区切って指定

例：
行のトラックの高さ　1行目200px、2行目1000px
列のトラックの幅　　1列目300px、2列目400px

css

.container{
  display:grid;
  grid-template-rows: 200px 100px;
  grid-template-columns: 300px 400px;
}

使用できる単位

px, %, em, vh, vw 、mm, cm, in, pt, pc, ch, rem, vmin, vmax など
calc()関数も使用可能です。

使用できるキーワード

max-content

トラック内のアイテムのmax-contentの値です。

min-content

トラック内のアイテムのmin-contentの値です。

auto

minmax(auto, max-content))

fit-content(数値)

autoとの違い
autoの最小値よりも引数が大きい場合、引数 がトラックの大きさになります。

minmax(min, max)

トラックの最小幅、最大幅を指定可能です。
例：minmax(180px, 1fr) と書くと、180px～1frの範囲(通常1fr、最小180px)

fr

余ったスペースを占有します。
例：可変幅 2カラム(1:2 の割合でレイアウト)

css

 grid-template-columns:1fr 2fr;

トラックの大きさ指定の繰り返し

repeat(繰り返し回数,大きさ)
要素を繰り返し並べたい時に使う関数です。

css

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

/* repeat()を使う場合 */
.container {
  display: grid;
  grid-template-rows: repeat(2, 100px 50px) 100px;
  grid-template-columns: repeat(5, 100px);
}

repeat()とminmax()の組み合わせ

例　grid-template-columns: repeat(4, minmax(200px, 1fr));
一列に4つのボックスが200px～1frの幅で可変する(通常1fr、最小200px)

Gridコンテナの大きさに合わせて繰り返す

Gridコンテナの大きさに合わせて繰り返します。 (repeat(auto-fill | auto-fit, ...))
例：固定長のトラックを、横に敷き詰められるだけ敷き詰めます。
repeat(auto-fill or auto-fit, トラックの幅) を使います。

css

.container {
  display: grid;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(auto-fill, 100px);
}

auto-fillとauto-fitの違い

プロパティ	内容
auto-fill	親要素にスペースが余る場合、空のグリッドが作られる
auto-fit	親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められる アイテムが配置されなかったトラックは無くなる

css

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

はみ出たアイテムの大きさ

ラインの外に出てしまうトラックの大きさの指定です。

プロパティ	内容
grid-auto-rows	はみ出たアイテムの行トラックの大きさを指定
grid-auto-columns	はみ出たアイテムの列トラックの大きさを指定

子要素が占める領域の位置を指定する

Gridコンテナを区切ってできたセルをGridアイテムに紐付けます。

敷き詰め方

Gridコンテナに指定

プロパティ	内容
row	子要素を左から配置していく(初期値)
column	子要素を上から配置していく
dense	空いているスペースをなるべく埋める

row/columnとdenseを同時に指定したい場合はgrid-auto-flow: column dense;のように記述します。

ラインの番号で指定する

アイテムに指定

プロパティ	内容
grid-row	アイテムが占める行のラインの番号をスラッシュ区切りで指定する 左から順に1、右から順に-1
grid-column	アイテムが占める列のラインの番号をスラッシュ区切りで指定する 上から順に1、下から順に-1

css

.item {
  grid-row: 1 / 3;
  /* 別の書き方:ライン1から2セル分を領域にする
     grid-row: 1 / span 2 ; */ 
  grid-column: 3 / 4;
}

エリアに名前を付けて指定する

エリアは、長方形か正方形のみで、L字方など複雑な形状にはできません。

プロパティ	内容
grid-template-areas	エリアを作ってそれぞれに名前を付ける(Gridコンテナに指定)
grid-area	アイテムを配置するエリアの名前を指定(Gridアイテムに指定)

html

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

css

.container {
    display: grid;
    grid-template-rows: 200px 200px 200px 200px;
    grid-template-columns: 200px 200px 200px 200px;
    grid-template-areas:
      "area1 area2 area2 area4"
      "area1 area3 area3 area4";
}

.item1 {
  grid-area: area1;
  background-color: red;
}

.item2 {
  grid-area: area2;
  background-color: blue;
}

.item3 {
  grid-area: area3;
  background-color: green;
}

.item4 {
  grid-area: area4;
  background-color: yellow;
}

グリッド全体の位置を指定する

Gridコンテナに指定
Gridコンテナ内のグリッドの位置を調整できます。
デフォルトでは、Gridコンテナ内のグリッドは左上寄せです。

プロパティ	内容
justify-content	グリッドの横方向の位置を指定する
align-content	グリッドの縦方向の位置を指定する

指定できる値	内容
normal	通常
start	スタート揃え
end	エンド揃え
center	センター揃え
stretch	アイテムを均等に配置(サイズがautoのアイテムは伸ばす)
space-around	アイテムを均等に配置(両端は間隔なし)
space-between	アイテムを均等に配置(両端の間隔は半分)
space-evenly	アイテムを均等に配置(両端の間隔も等しい)
baseline	ベースライン揃え
first baseline	最初のベースライン揃え
last baseline	最後のベースライン揃え

セルの隙間を指定

Gridコンテナに指定
デフォルトだとセル同士は隙間なく隣接します。
justify-content/align-contentで等間隔配置する他に、数値を直接指定して間隔を作つことが出来ます。

プロパティ	内容
grid-row-gap	縦の隙間を指定
grid-column-gap	横の隙間を指定

アイテムの位置の指定

Gridコンテナ側指定

アイテムの位置を一括で指定します。
デフォルトでは、アイテムはエリア内をすべて占めるように配置されます。

プロパティ	内容
justify-items	全てのアイテムの横方向の位置を指定する
align-items	全てのアイテムの縦方向の位置を指定する

Gridアイテム側指定

全てのアイテムの位置を一括で指定するのではなく、個別で指定します。

プロパティ	内容
justify-self	アイテムの横方向の位置を指定する
align-self	アイテムの縦方向の位置を指定する

アイテム側指定(絶対位置)

アイテムの位置を絶対位置で指定できます。
Gridコンテナにposition: static;以外が指定され、Gridアイテムにposition: absolute; が指定されている場合、top / bottom / left / rightで、ラインからの距離を指定可能できます。

html

<div class="container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
</div>

css

.container {
  position: relative;
  display: grid;
  grid-template-rows: 100px 100px 100px 100px;
  grid-template-columns: 100px 100px 100px 100px;
}

.item1 {
  position: absolute;
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  opacity: .5;
  background-color: red;
}

アイテムの順番指定

並び順

アイテムに指定する
orderプロパティ
例 order: 2;

重なり順

アイテムに指定する
z-indexプロパティ
アイテム同士が重なる場合に、重なり順序を変えられます。
アイテムに position: relative; などの指定は不要です。

ショートハンド

grid-template

Gridコンテナに指定する
grid-template-rows / grid-template-columns / grid-template-areas のショートハンドです。

エリアの名前(grid-template-areas)とその行の高さ(grid-template-rows)を書きます。
最後にスラッシュの後にそれぞれの列の幅(grid-template-columns)を書きます。

css

.container {
  grid-template:
    "area1 area2 area3" 100px
    "area4 area5 area6" 100px
      / 200px 200px 200px;
}

※エリアの名前の指定は必須、行の高さと列の幅は任意です。

grid

Gridコンテナに指定する
Gridコンテナに指定できるグリッド関係のプロパティほぼ全てのショートハンドです。
grid-template-rows / grid-template-columns / grid-template-areas / grid-auto-rows / grid-auto-columns / grid-auto-flow
( grid-row-gap / grid-column-gapは初期化されます)

1つのGridプロパティ宣言では、明示的なグリッドに関するプロパティの値のみ、または、暗黙的なグリッドに関するプロパティの値のみが指定できます。

明示的/暗黙的	プロパティ
明示的なグリッドに関するプロパティ	grid-template-rows grid-template-columns grid-template-areas
暗黙的なグリッドに関するプロパティ	grid-auto-rows grid-auto-columns grid-auto-flow

縦に配置

grid-auto-flow: row; (初期値)にして、grid-auto-rows と grid-template-columnsを指定します。

Gridアイテムは左から右に配置されます。
列のトラック数は固定数、行のトラック数は可変になります。

トラック	内容
固定数の列トラック	grid-template-columns でトラックの数と大きさを指定可能
可変数の行トラック	grid-auto-rowsでトラックの大きさを指定できる

css

.container {
  display: grid;
  grid-auto-flow: row;  /* 初期値なので省略可 */
  /* grid: auto-flow "grid-auto-rows" / "grid-template-columns"; */
  grid: auto-flow 100px / 200px 200px 200px;
}

横に配置

grid-auto-flow: column; にして、grid-template-rows と grid-auto-columns を指定します。

列のトラック数は可変、行のトラック数は固定です。
Gridアイテムは上から下に配置されます。

トラック	内容
可変数の列トラック	grid-template-rowsでトラックの数と大きさを指定可能
固定数の行トラック	grid-auto-columns でトラックの大きさを指定可能

css

.container {
  display: grid;
  grid-auto-flow: column; 
  /* grid: "grid-template-rows" / auto-flow "grid-auto-columns" ; */
  grid: 200px 200px 200px / auto-flow 100px;
}

auto-flow に続けて dense を書くこともできます。

css

.container {
  display: grid;
  grid: auto-flow dense 100px / 200px 200px 200px;
}

grid-gap

Gridコンテナに指定します。
grid-row-gap / grid-column-gapのショートハンドです。
半角スペースで区切って2つの値を指定します。

css

.container {
  /* ロングハンド */
  grid-row-gap: 10px;
  grid-column-gap: 20px;

  /* ショートハンド */
  grid-gap: 10px 20px;
}

grid-row-gap / grid-column-gapが同値の場合は1つだけ書くこともできます。

css

.container {
  /* ロングハンド */
  grid-row-gap: 10px;
  grid-column-gap: 10px;

  /* ショートハンド */
  grid-gap: 10px;
}

grid-row

Gridアイテムに指定する

css

/* ショートハンド */
grid-row: 1 / 2;

/* ロングハンド */
grid-row-start: 1; grid-row-end: 2; 

grid-column

Gridアイテムに指定します。

css

/* ショートハンド */
grid-column: 1 / 2;

/* ロングハンド */
grid-column-start: 1; grid-column-end: 2;

grid-area

grid-row / grid-columnのショートハンドです。
Gridアイテムに指定します。

css

.item {
  /* ロングハンド */
  grid-row: 1;
  grid-column: 2;

  /* ショートハンド */
  grid-area: 1 / 2;
}

grid-rowとgrid-columnが複数の場合は「/」で区切ります。

css

.item {
  /* ロングハンド */
  grid-row: 1 / 2;
  grid-column: 3 / 4;

  /* ショートハンド */
  grid-area: 1 / 3 / 2 / 4;
}

grid-area でのエリア指定を grid-row / grid-column を使って書くことも出来ます。

css

.item {
  /* ロングハンド */
  grid-row: area1;
  grid-column: area1;

  /* ショートハンド */
  grid-area: area1; 
}