無駄なDiv要素も極力増やさずに自由なレイアウトが出来ます。
手順は、親要素を格子状に分割して領域を作り、その領域に子要素を配置していく流れです。
用語
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
.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 の割合でレイアウト)
grid-template-columns:1fr 2fr;
トラックの大きさ指定の繰り返し
repeat(繰り返し回数,大きさ)
要素を繰り返し並べたい時に使う関数です。
.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, トラックの幅) を使います。
.container {
display: grid;
grid-auto-rows: 100px;
grid-template-columns: repeat(auto-fill, 100px);
}
auto-fillとauto-fitの違い
| プロパティ | 内容 |
|---|---|
| auto-fill | 親要素にスペースが余る場合、空のグリッドが作られる |
| auto-fit | 親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められる アイテムが配置されなかったトラックは無くなる |
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 |
.item {
grid-row: 1 / 3;
/* 別の書き方:ライン1から2セル分を領域にする
grid-row: 1 / span 2 ; */
grid-column: 3 / 4;
}
エリアに名前を付けて指定する
エリアは、長方形か正方形のみで、L字方など複雑な形状にはできません。
| プロパティ | 内容 |
|---|---|
| grid-template-areas | エリアを作ってそれぞれに名前を付ける(Gridコンテナに指定) |
| grid-area | アイテムを配置するエリアの名前を指定(Gridアイテムに指定) |
<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>
.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で、ラインからの距離を指定可能できます。
<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>
.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)を書きます。
.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でトラックの大きさを指定できる |
.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 でトラックの大きさを指定可能 |
.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 を書くこともできます。
.container {
display: grid;
grid: auto-flow dense 100px / 200px 200px 200px;
}
grid-gap
Gridコンテナに指定します。
grid-row-gap / grid-column-gapのショートハンドです。
半角スペースで区切って2つの値を指定します。
.container {
/* ロングハンド */
grid-row-gap: 10px;
grid-column-gap: 20px;
/* ショートハンド */
grid-gap: 10px 20px;
}
grid-row-gap / grid-column-gapが同値の場合は1つだけ書くこともできます。
.container {
/* ロングハンド */
grid-row-gap: 10px;
grid-column-gap: 10px;
/* ショートハンド */
grid-gap: 10px;
}
grid-row
Gridアイテムに指定する
/* ショートハンド */
grid-row: 1 / 2;
/* ロングハンド */
grid-row-start: 1; grid-row-end: 2;
grid-column
Gridアイテムに指定します。
/* ショートハンド */
grid-column: 1 / 2;
/* ロングハンド */
grid-column-start: 1; grid-column-end: 2;
grid-area
grid-row / grid-columnのショートハンドです。
Gridアイテムに指定します。
.item {
/* ロングハンド */
grid-row: 1;
grid-column: 2;
/* ショートハンド */
grid-area: 1 / 2;
}
grid-rowとgrid-columnが複数の場合は「/」で区切ります。
.item {
/* ロングハンド */
grid-row: 1 / 2;
grid-column: 3 / 4;
/* ショートハンド */
grid-area: 1 / 3 / 2 / 4;
}
grid-area でのエリア指定を grid-row / grid-column を使って書くことも出来ます。
.item {
/* ロングハンド */
grid-row: area1;
grid-column: area1;
/* ショートハンド */
grid-area: area1;
}