Grid Garden - Lv. 8〜14/28

Grid Garden - Lv. 8/28

もう一度 grid-column-end で span キーワードを使ってニンジンに水をやってみてください。

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: 1;
  grid-column-end: span 5;
}

Grid Garden - Lv. 9/28

span キーワードを grid-column-start で使えば、グリッドアイテムの終了位置までの幅を指定することもできます。

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: span 3;
  grid-column-end: 6;
}

Grid Garden - Lv. 10/28

毎回 grid-column-start と grid-column-end を両方タイプするのは疲れてしまうかもしれませんね。
嬉しいことに、grid-column という短縮プロパティを使えば、2つの値をスラッシュで区切ることで両方とも指定できます。

たとえば、grid-column: 2 / 4; と書けば、2番目の縦のグリッドラインに始まり、4番目のグリッドラインで終わるようなグリッドアイテムを設定できます。

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column: 4 / 6;
}

Grid Garden - Lv. 11/28

grid-column を使ってニンジンに水をやってみてください。span キーワードはこの短縮プロパティにも使えるので、ぜひ使ってみましょう！

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column: 2 / 5;
}

Grid Garden - Lv. 12/28

CSS グリッドが flexbox より優れている点は、グリッドアイテムを行と列の2次元方向に簡単に指定できることです。grid-row-start は、縦軸に沿って働くという以外は grid-column-start と全く同じです。

grid-row-start を使ってニンジンに水をやってください。

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-row-start: 3;
}

Grid Garden - Lv. 13/28

次は、短縮プロパティ grid-row を試しましょう。

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-row: 3 / 6;
}

Grid Garden - Lv. 14/28

grid-column と grid-row を同時に使って、2次元方向に位置を指定しましょう。

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#poison {
  grid-column: 2 / 3;
  grid-row: 5 / 6;
}