【CSS】Grid Layout を使いこなす – その3 基本以外のプロパティ

「Grid Layout を使いこなす」全6回です。

⇒ その1 基本
⇒ その2 トラック、領域の値
⇒ その3 基本以外のプロパティ(今回)
⇒ その4 ショートハンド
⇒ その5 IE 対応
⇒ その6 まとめ

これまで触れてきた基本となる5つのプロパティ一覧です。

プロパティ 役割
display: grid 親要素(コンテナ)で、コンテナの作成を指示
grid-template-rows 親要素(コンテナ)で、各行トラックの高さを指定
grid-template-columns 親要素(コンテナ)で、各列トラックの幅を指定
grid-row 子要素(アイテム)で、そのアイテムの行の領域を指定
grid-column 子要素(アイテム)で、そのアイテムの列の領域を指定

Grid Layout モジュールに含まれる、これ以外のプロパティをまとめます。

gap プロパティ

トラック間の隙間を定義するプロパティで、親要素(コンテナ)で指定します。

grid-row-gap ⇒  行の間の隙間を指定
grid-column-gap ⇒ 列の間の隙間を指定

grid-row-gap: 3%;
grid-column-gap: 20px;

値には、px、em、%、normal(ブラウザに依存)などが指定できます。

grid プロパティには、calc() 関数も利用できます。

grid-row-gap: cal(20px + 10%);

* CSS の仕様書を読むと、当初は grid-gap プロパティで定義されていましたが、今は、この接頭辞なしの、gap に置き換えられています。
grid-row-gap ⇒ gap-row
grid-colomn-gap ⇒ gap-colomn
ですが、grid-gap を実装していて、gap を実装していないブラウザがあるため、接頭辞付きのプロパティを使用した方がいいようです。

grid-template-areas と grid-area の組み合わせ

grid-template-areas は、各アイテムに対して、名前付きの領域を定義するプロパティで、親要素(コンテナ)で指定します。

grid-area を使って、アイテムと領域の名前を関係づけます。

この図のレイアウトを例にして、領域を指定する場合を見ていきます。

まず、コンテナの方で、各領域を指定します。(それぞれのアイテムに grid-column、grid-row で領域を指定する代わりとなります。)

.wrapper {
display: grid;
grid-template-areas: "head head" /* 1行目の1列目 1行目の2列目 */
                     "nav  main" /* 2行目の1列目 2行目の2列目 */
grid-template-rows: 200px 1fr;
grid-template-columns: 300px 1fr;
}

grid-area を使って、grid-template-areas で定義した領域の名前を、各アイテムと関連付けるクラスを作ります。

.head {
grid-area: head;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}

grid-auto-row, grid-auto-column

拡張したトラックの大きさを指定するプロパティです。
トラックの大きさは、grid-template-rows / grid-template-columns で指定しますが、アイテムがそこに収まらない場合も考えられます。例えば、セルに対して、アイテムの方が多すぎる、なんていう場合です。
また、コンテナにそもそも grid-template-rows / grid-template-columns を指定していない場合、行数、列数、大きさが不明ということもあります。
こういった場合に、grid-auto-rows / grid-auto-columns で、トラックの幅を指定します。コンテナに指定します。

grid-auto-row: minmax(20% 1fr);
grid-auto-column: 20px;

値には、長さの単位、%、fr、max-content、min-content、minmax()関数、auto(初期値)が指定できます。

grid-auto-flow

アイテムを配置する方向を指定するプロパティです。
アイテムに grid-row、 grid-column、grid-area を特に指定しない場合、アイテムは、1行目の左から右へ、2行目の左から右へ・・・と埋まっていきます。
これはデフォルトで、grid-auto-flow: row となっているからです。

《 アイテムの配置される順番(grid-row、 grid-column、grid-areaで指定がない場合)》
grid-auto-flow: row ⇒ 1行目の左から右へ、2行目の左から右へ・・・
grid-auto-flow: column ⇒ 1列目の上から下へ、2列目の上から下へ・・・
grid-auto-flow: dense ⇒ 空いているスペースをなるべく埋める
grid-auto-flow: row dense ⇒ 1行目の左から右へ、2行目の左から右へ・・・空いているスペースをなるべく埋める
grid-auto-flow: column dense ⇒ 1列目の上から下へ、2列目の上から下へ・・・空いているスペースをなるべく埋める

Grid Layout モジュール以外のプロパティ

Grid Layout モジュール以外のプロパティで、配置の指定によく利用するものをまとめます。

justify-content: コンテナに指定。グリッドの水平方向の配置
値: start(右揃え、デフォルト), center(中央揃え), end(左揃え)

align-content: コンテナに指定。グリッドの垂直方向の配置
値: start(上揃え、デフォルト), center(中央揃え), end(下揃え)

justify-item: コンテナに指定。全アイテムの水平方向の配置
値: start(右揃え、デフォルト), center(中央揃え), end(左揃え)

align-item:コンテナに指定。グリッドの垂直方向の配置
値: start(上揃え、デフォルト), center(中央揃え), end(下揃え)

justify-self: アイテムに指定。そのアイテムの水平方向の配置
値: start(右揃え、デフォルト), center(中央揃え), end(左揃え)

align-self:アイテムに指定。そのアイテムの垂直方向の配置
値: start(上揃え、デフォルト), center(中央揃え), end(下揃え)

order: アイテムに指定。並ぶ順番
値: 整数

カテゴリーCSS