CSS GRIDを勉強してみる(4) グリッド線

Firefoxの開発者ツールのGrid Inspectorのオプションには"Display line numbers"という項目があって、これにチェックを入れるとグリッド線の番号がわかる。縦横それぞれに1から始まる番号がついている。

f:id:Tambourine:20181022143945p:plain

コンテンツの配置位置をこのグリッド線を使って指定することが出来る。

こんな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で、box1とbox3の場所を指定する。指定している数字が示しているのは、グリッド線の番号である。

.wrapper {
  color: white;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 40px;
}

.box1 {
  background-color: #660000;
  opacity: 0.5;

  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

.box2 {
  background-color: #006600;
  opacity: 0.5;
}

.box3 {
  background-color: #000066;
  opacity: 0.5;

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

.box4 {
  background-color: #666600;
  opacity: 0.5;
}

.box5 {
  background-color: #660066;
  opacity: 0.5;
}

f:id:Tambourine:20181022145620p:plain

指定しなかったbox2,4,5は空いたところに順番に入る。なので、3と1の途中が空いていればそこに入る。

以下のように指定し直せば、

.box1 {
  grid-column-start: 2;
  grid-row-start: 3;
  grid-row-end: 5;
}

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