Grid Garden - Lv. 15〜21/28 - コーディング

Grid Garden - Lv. 15/28

grid-column と grid-row をあわせて使えば、もっと広いグリッドも指定できます。試してみてください！

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

#water {
  grid-row: 1 / 8;
  grid-column: 2 / 8
}

Grid Garden - Lv. 16/28

grid-area は、4つの値をスラッシュで区切って与えることで、 grid-row-start、grid-column-start、grid-row-end、grid-column-end を同時に指定できます。

こんなふうに指定します。grid-area: 1 / 1 / 3 / 6;

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

#water {
  grid-area: 1 / 2 / 4 / 8;
}

Grid Garden - Lv. 17/28

grid-area を使って2つ目の領域を指定して、まだ水がかかっていないニンジンにも水をやりましょう。

こんなふうに指定します。grid-area: 1 / 1 / 3 / 6;

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

#water-1 {
  grid-area: 1 / 4 / 6 / 5;
}

#water-2 {
  grid-area: 2 / 3 / 5 / 8;
}

Grid Garden - Lv. 18/28

特に明示することなくグリットアイテムが grid-area、grid-column、grid-row などで置かれた場合、ソースコードに現れる順番に自動的に置かれます。しかし、order プロパティを使えば、この順序を上書きできます。

デフォルトでは、すべてのグリッドアイテムの order は 0 ですが、z-index と同じように正または負の値を自由に設定できます。

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

.water {
  order: 0;
}

#poison {
  order: 2;
}

Grid Garden - Lv. 19/28

デフォルトでは、すべてのグリッドアイテムの order は 0 ですが、z-index と同じように正または負の値を自由に設定できます。

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

.water {
  order: 0;
}

.poison {
  order: -1
}

Grid Garden - Lv. 20/28

grid-template-columns に新しい値を設定して、ニンジンに水をやってみてください。
1番目の列の値は50%に設定することになるでしょう。

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

#water {
  grid-column: 1;
  grid-row: 1;
}

Grid Garden - Lv. 21/28

repeat 関数というものがあって、簡単に書くことができます。

これまで同じ 20% 幅の5つの列 grid-template-columns: 20% 20% 20% 20% 20%; を書いていました。この指定は、grid-template-columns: repeat(5, 20%); という書き方で簡単にかけます。

grid-template-columns で repeat 関数を使って、12.5% の幅の8つの列を作ってみましょう。

#garden {
  display: grid;
  grid-template-columns: repeat(8, 12.5%);
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column: 1;
  grid-row: 1;
}