こんにちわ！
実習生の石川です。

ついに10日目です。
今日は実習生企画のことを進めました。
だんだんとイメージがわいてきました。

さて、昨日の続きでGridの話です。

こんな感じで要素をレイアウトできるGridですが、座標の指定が少しわかりづらいので補足をします。

上記の画像ではこんな感じのcssを書いています。
.one {
grid-column: 1 / 4;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 4;
}
.three {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
.four {
grid-column: 2 / 4;
grid-row: 3;
}

「2 / 4」とか「3」とか書き方がややこしいですね。

今回は説明するために要素を一つ減らします。
他の設定は前回と一緒です。
<div class=”wrapper”>
<div class=”one”>One</div>
<div class=”two”>Two</div>
<div class=”three”>Three</div>
</div>

まずはわかりやすい「プロパティ値が数字単体」の場合についてです。
それぞれの行と列をすべてバラバラにして重ならないようにしました。

.one {
grid-column: 1;
grid-row: 1;
}
.two {
grid-column: 2;
grid-row: 2;
}
.three {
grid-column: 3;
grid-row: 3;
}

こうなります。

つまり座標はこのように指定されているんですね。

プロパティ値が数字単体の時はgrid-columnがx軸、grid-rowがy軸を指定していることがわかります。

次に「1 / 4」のような「/」スラッシュを使った記述です。

ざっと説明すると、これは分数ではありません。【開始場所　/　終了場所】を指定しています。

百聞は一見に如かず、まず書いてみましょう。
.one {
grid-column: 1 / 4;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 2;
}
.three {
grid-column: 3 / 4;
grid-row: 3;
}

こんな感じになります。

grid-columnのプロパティ値が【開始場所　/　終了場所】となります。

↓これを見ていただければわかりやすいかもしれません。

oneは1から4までの幅
twoは2から4までの幅
threeは3から4までの幅
となっています。

いかがでしょうか。
ぜひ使ってみてください。

では！！