グリッド領域を個別に指定する

昨日は最低限の Grid Layoutをやった。今日はもう少し踏み込んで、グリッド領域を個別に指定する方法を調べる。

領域をグリッドコンテナーの子要素で指定する

• (Demo) グリッド線で領域を個別に指定 | JSFiddle

Grid Layout には領域を仕切る「グリッド線」というのがあり、これを子要素で使って領域を個別に指定する。

• grid-column-start, grid-column-end ... 列のグリッド線に対する始点と終点
• grid-row-start, grid-row-end ... 行のグリッド線に対する始点と終点

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: .25em;
  grid-row-gap: .25em;
}

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

.grid__item02 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
}

グリッド領域の記述を省略する

• (Demo) グリッド線で領域を個別に指定（記述を省略） | JSFiddle

grid-column-start と grid-column-end は grid-column で、grid-row-start と grid-row-end は grid-row で省略することができる。

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

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