【CSS】Grid Layout を使いこなす – その4 ショートハンド

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

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

ショートハンド一覧

Grid Layout プロパティのショートハンドです。

ショートハンド 含まれるプロパティ
grid-template grid-template-rows, grid-template-coloums, grid-template-areas
grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow
grid-gap grid-row-gap, grid-column-gap
grid-row grid-row-start, grid-row-end
grid-column grid-column-start, grid-column-end

grid-template でまとめる


トラックの大きさを指定する grid-template-rows、grid-template-coloums、名前付きの領域を定義する grid-template-areas をまとめて指定ショートハンドです。
コンテナ(親要素)に指定。

指定の方法は2通りあります。
この図のレイアウトを指定する例です。

<方法 ① grid-template-rows / grid-template-columns をまとめる>

grid-template: 200px 1fr  / 300px 1fr;  /* 各行トラック高さ / 各列トラック幅 */

行と列の間には、スラッシュを挟みます。

* この方法では、grid-template-areas は初期化されます。grid-template-areas を合わせて指定したい場合は、grid-template の後に、grid-template-areas を指定します。

<方法 ② grid-template-areas grid-template-rows / grid-template-columns をまとめる>

grid-template: "head head" 200px  /* "1行目各列エリア名" 1行目トラック高さ */
               "nav  main" 1fr    /* "2行目各列エリア名" 2行目トラック高さ */
              / 300px 1fr         /* / 各列トラック幅 */

実際のレイアウトと近い配置に指示が書かれるので、CSS 上でも視覚化されるような指定方法ですね。
行、列の大きさは省略可。

grid でまとめる

コンテナに指定するプロパティを、ほぼ全部、まとめられるショートハンドです。
grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow を単一の宣言で設定します。

指定の方法は3通りあります。

<方法 ① grid-template-area grid-template-rows / grid-template-columns をまとめる>
grid-template の方法 ① 、または方法 ② と同じです。
(ですが、grid-template とは異なり、grid では、ほかの grid のサブプロパティはすべて、初期値に初期化されます。)

grid: 200px 1fr / 300px 1fr;  /* 各行トラック / 各列トラック */

grid: "head head" 200px  /* "1行目各列エリア名" 1行目トラック高さ */
      "nav  main" 1fr    /* "2行目各列エリア名" 2行目トラック高さ */
     / 300px 1fr         /* / 各列トラック幅 */

<方法 ② grid-auto-flow: row と grid-template-columns をまとめる>
grid-auto-flow: row を指定するので、アイテムは1行目から順に右から左へ埋められていきます。
行トラック数 ⇒ 可変。全てのアイテムが埋まるまで行は加算されます。
列トラック数 ⇒ 固定。このプロパティで指定した数。

grid: auto-flow 100px / 1fr 1fr 1fr;   /* 行に auto-flow、行トラックの高さ / 各列トラックの幅 */

スラッシュ前:行を定義しています。auto-flow で、アイテムの並び方(grid-auto-flow: row)と行数可変を指定し、続いて 100px と行の高さを指定しています。
スラッシュ後:列を定義しています。1fr の幅で 3 列になります。

<方法 ③ grid-template-rows と grid-auto-flow: column をまとめる>
grid-auto-flow: column を指定するので、アイテムは1列目から順に上から下へ埋められていきます。
行トラック数 ⇒ 固定。このプロパティで指定した数。
列トラック数 ⇒ 可変。全てのアイテムが埋まるまで列は加算されます。

grid: 1fr 1fr 1fr / auto-flow 100px;  /* 各行トラックの高さ / 列に auto-flow、列トラックの幅 */

スラッシュ前:行を定義しています。1fr の高さで 3 行になります。
スラッシュ後:列を定義しています。auto-flow で、アイテムの並び方(grid-auto-flow: column)と列数可変を指定し、続いて 100px と列の幅を指定しています。

grid-gap でまとめる

トラック間の隙間を指定する grid-row-gap と grid-column-gap をまとめて指定するショートハンドです。
コンテナ(親要素)に指定。

grid-gap: 10px;  /* 行列ともトラック間の隙間 10px */
grid-gap: 3% 5%;  /* 行トラック間の隙間 3% 列トラック間の隙間 5% */

grid-gap は、値が1つの場合は、行、列とも一括指定、スペースを挟んで二つの場合は、1つ目が行、2つ目が列の値になります。

grid-row, grid-column 開始と終了を分けて記述

アイテムの領域を指定する grid-row と grid-column は、開始と終了のライン番号をまとめて記述しているショートハンドです。
これを、開始と終了を分けて指定することができます。
アイテム(子要素)に指定。

grid-row-start: 1; /* 行の領域の開始するライン番号 */
grid-row-end: 2;   /* 行の領域の終了するライン番号 */

grid-column-start: 2; /* 列の領域の開始するライン番号 */
grid-column-end: 3;   /* 列の領域の終了するライン番号 */
カテゴリーCSS

3 Replies to “【CSS】Grid Layout を使いこなす – その4 ショートハンド”

コメントは受け付けていません。