CSS Grid チートシート

基本的な使い方

grid-template-columns/rows で、グリッド線（グリッドトラック）を設定する。
枠線も合わせて、線は左と上から1, 2, 3……と番号が付くので、グリッドアイテムには「開始位置 / 終了位置」を指定する。
.sample-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows   : 1fr 1fr 1fr;
}
.title {
  grid-column: 1 / 4;
  grid-row   : 1 / 2;
}
.menu {
  grid-column: 1 / 2;
  grid-row   : 2 / 4;
}
.contents {
  grid-column: 2 / 4;
  grid-row   : 2 / 4;
}
title
menu
contents

エリア名で要素を配置する

グリッド・コンテナで grid-template-areas を利用してセル(またはセル範囲)にエリア名を付ける。
あくまで名前を付けるだけなので、どういう分割をするかは grid-template-columns/rows で指定する必要がある。
グリッド・アイテムで grid-area を利用して、配置先のエリア名を指定する。 
.sample-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows   : 1fr 1fr 1fr;
  grid-template-areas  : "title title    title   "
                         "menu  contents contents"
                         "menu  contents contents";
}
.title {
  grid-area: title;
}
.menu {
  grid-area: menu;
}
.contents {
  grid-area: contents;
}
title
menu
contents

グリッド・コンテナ

grid-template-columns

列方向のグリッド線（グリッドトラック）を設定。

30px 30px auto

1
2
3

1fr 2fr 3fr

1
2
3

repeat(5, 30px)

1
2
3
4
5

repeat(auto-fill, 30px)

1
2
3
4
5
6
7

grid-template-rows

行方向のグリッド線（グリッドトラック）を設定。

30px 30px auto

1
2
3

1fr 2fr 3fr

1
2
3

repeat(5, 30px)

1
2
3
4
5

repeat(auto-fill, 30px)

1
2
3
4
5
6
7

grid-column-gap

セルの列の隙間幅を指定する。

0

1
2
3
4
5
6
7
8
9

20px

1
2
3
4
5
6
7
8
9

grid-row-gap

セルの行の隙間高さを指定する。

0

1
2
3
4
5
6
7
8
9

20px

1
2
3
4
5
6
7
8
9

justify-items

セル内の内容を表示する横位置を指定する。

stretch (規定)

1
2
3
4
5
6
7

start

1
2
3
4
5
6
7

center

1
2
3
4
5
6
7

end

1
2
3
4
5
6
7

align-items

セル内の内容を表示する縦位置を指定する。

stretch (規定)

1
2
3
4
5
6
7

start

1
2
3
4
5
6
7

center

1
2
3
4
5
6
7

end

1
2
3
4
5
6
7

justify-content

指定したグリッドが要素全体を埋めるほどの幅を持たない場合、セルを親要素のどこに置くかを指定する。

start

1
2
3
4

center

1
2
3
4

end

1
2
3
4

space-between

1
2
3
4

space-around

1
2
3
4

space-evenly

1
2
3
4

align-content

指定したグリッドが要素全体を埋めるほどの高さを持たない場合、セルを親要素のどこに置くかを指定する。

start

1
2
3
4

center

1
2
3
4

end

1
2
3
4

space-between

1
2
3
4

space-around

1
2
3
4

space-evenly

1
2
3
4

grid-auto-flow

グリッド・アイテム側の grid-column, grid-row で表示位置指定が無い場合、grid-auto-flow の設定に従って要素を流し込む。
普通使わないが"dense"という値を指定することもできる。これは流し込む時に途中の隙間を積極的に埋めるrowみたいなイメージ。

row

1
2
3
4
5
6
7

column

1
2
3
4
5
6
7

grid-auto-columns

grid-template-columns で指定したグリッド線でグリッド・アイテムが収まりきらないときに、自動的に増える列の幅を指定する。
grid-auto-flow:column; とセットで使わないと無意味。
これを指定しておけばコンテンツ数にあわせて、無限にセルが自動作成される。

grid-template-columns:50px 50px;
grid-auto-columns:30px;

1
2
3
4
5
6
7
8
9
10

grid-auto-rows

grid-template-rows で指定したグリッド線でグリッド・アイテムが収まりきらないときに、自動的に増える行の高さを指定する。
grid-auto-flow:row; とセットで使わないと無意味。
これを指定しておけばコンテンツ数にあわせて、無限にセルが自動作成される。

grid-template-rows:50px 50px;
grid-auto-rows:30px;

1
2
3
4
5
6
7
8
9
10

グリッド・アイテム

grid-column

アイテムの列の開始、終了を指定する。
マイナスは最後から数えた場合の位置。spanは開始位置とセル数指定。

1 / 3

1 / 3

2 / -1

2 / -1

1 / span 3

1 / span 3

grid-row

アイテムの行の開始、終了を指定する。
マイナスは最後から数えた場合の位置。spanは開始位置とセル数指定。

1 / 3

1 / 3

2 / -1

2 / -1

1 / span 3

1 / span 3

justify-self

セル内の横位置のどこに配置するかを指定。

stretch (規定)

1
2
3
4
5
6
7
8
9

start

1
2
3
4
5
6
7
8
9

center

1
2
3
4
5
6
7
8
9

end

1
2
3
4
5
6
7
8
9

align-self

セル内の縦位置のどこに配置するかを指定。

stretch (規定)

1
2
3
4
5
6
7
8
9

start

1
2
3
4
5
6
7
8
9

center

1
2
3
4
5
6
7
8
9

end

1
2
3
4
5
6
7
8
9

order

以下はhtmlソースでは1～4をバラバラの順に書いてあるが、orderを指定することで指定順に表示している。

order

1
4
2
3

参考URL

http://grid.malven.co/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://app.codegrid.net/entry/display-grid-1
https://qiita.com/kura07/items/486c19045aab8090d6d9