グリッド領域の並び替え

f:id:namikuguri:20180125082856p:plain

先週土曜からはじめた CSS Grid Layout の学習も、いよいよ今回でおわり。最後は指定した領域の並び替え方法を学んでみようと思う。

グリッドコンテナーの中の要素は、なにも指定しなければ HTML で書かれた順序で並ぶ。この並び順を変更するには、order プロパティを使う。

(Demo) グリッド領域の並び替え | JSFiddle

.grid__item01 {
  grid-row: 1 / 3;
  grid-column: 1 / 4;
}

.grid__item02 {
  order: 4; /* order の中で最後 */
}

.grid__item03 {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}

.grid__item04 {
  order: 2;
}

.grid__item05 {
  order: 3;
}

.grid__item06 {
  order: 1; /* 明示的にエリアが指定されている grid__item01 のつぎ。order の中で最初 */
}

order プロパティは、grid-row や grid-column で明示的に行と列が指定されていない要素に有効になる。上記の例だと、明示的に指定された grid__item01 と grid__item03 は飛び越えて、order で指定された数の小さいものから順に敷き詰められている。

また、グリッド領域の配置を横軸や縦軸で指定することもできる。横軸であれば justify-self（または justify-items ）、縦軸であれば align-self（または align-items）を使う。また、グリッドコンテナーの枠に合わせて配置を調整したいときは、横軸であれば justify-content、縦軸であれば align-content が使える。

以下の記事にあるデモを確認してもらうとわかりやすい。