CSS GRIDを勉強してみる(11) - さまざまなshorthand

ここからは

developer.mozilla.org

を読む。エゲレス語の文書を読んでいて、かつ、私の英語能力がプアなので、英語そのままの用語が出てきたり、 英文をそのまま引用したり、内容を勘違いしていたりするかもしれない。知ったこっちゃないけど。

あと、少しペースアップしないと読み終わらない気がする・・・。

今回のスタートは、この状態だ。

まずはHTML

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

次にCSS。ちょっと長い。 3×3のグリッドを指定していて、box1〜4はその中に配置。 box5は横幅3列分を指定しているが、 縦の位置は指定していないので最後にくっついている。 つまり、box5がある位置は、暗黙の列だ。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 50px);
  grid-gap: 2px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}

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

.box3 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

.box5 {
  grid-column-start: 1;
  grid-column-end: 4;
}

レンダリング結果は、こうなる。

今回はここからレンダリング結果は変わらない。 位置の指定の仕方の省略記法の紹介だけだ。

*-endの省略

まず、グリットひとつ分の範囲を指定する場合、*-endは指定しなくても良い。

そのため、少し短く出来る。

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

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

.box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
}

.box5 {
  grid-column-start: 1;
  grid-column-end: 4;
}

負のグリッド線番号

グリッド線の番号は正の数と負の数両方がついている。 最初の番号は1であり、最後は行あるいは列の最大値+1である。 今は3×3のグリッドなので最小が1、最大が4だ。 負の番号は最大を-1として同じようについている。最小が-4, 最大が−1だ。 要するに何行何列のグリッドを作ろうが、左端あるいは上端のグリッド線の番号は1であるように、 右端あるいは下端のグリッド線の番号は-1である。

なので、右端に接しているエリアを指定したいのであれば、

.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: -1;
}

のように-1を使う方がわかりやすいことが多いだろう。 この例では、box1は上端から下端まで前列をつないだエリアだと言うことがわかりやすい。

ただし、この下端は明示的なグリッドの下端である。 下のグリッド線番号を見て欲しい。右端の負の番号が切れて見えなくならないように列幅を狭めてある。

グリッドの右端の縦のグリッド線の番号は4で-1だ。 同じように横のグリッド線も4が-1だ。 明示的に指定した3×3のグリッドからbox5がはみ出したために、 横のグリッド線番号5が存在するが、これには負の番号がつかないことに注意。

grid-column 省略記法

startとendを1行で書く省略記法がある。単に/で区切って並べればよい。こんな感じ。

.box1 {
  grid-column: 1;
  grid-row: 1 / -1;
}

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

.box3 {
  grid-column: 2;
  grid-row: 1;
}

.box4 {
  grid-column: 2 / -1;
  grid-row: 3;
}

.box5 {
  grid-column: 1 / -1;
}

ぐっと短くできた。*-endが省略できていたものは、 同じように/以降は省略できる。

grid-area

エリアを取り囲む4つのグリッド線を1行で指定する記法もある。 grid-areaを使う。指定する順番は、上 / 左 / 下 / 右の順。 少し上で出したグリッド線の番号表示を見ながら確認して欲しいのだが、box1であれば 1 / 1 / 4 / 2になる。もちろん1 / 1 / -1 / 2でも同じだ。

というわけで、以下のようにCSSは短く出来るが、わかりやすいかは微妙。

.box1 {
  grid-area: 1 / 1 / -1 / 2;
}

.box2 {
  grid-area: 1 / 3 / 3 / 4;
}

.box3 {
  grid-area: 1 / 2 / 2 / 3;
}

.box4 {
  grid-area: 3 / 2 / 4 / -1;
}

span

もちろん、「グリッド線の何番目まで」ではなく、「セルいくつ分」で幅を指定したいこともある。 その場合にはspanを使う。

例を見れば、すぐわかると思う。これまでのものは、こう書き換え可能だ。

.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.box2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.box3 {
  grid-column: 2;
  grid-row: 1;
}

.box4 {
  grid-column: 2 / span 2;
  grid-row: 3;
}