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

今日気づいたんですが、僕たちの実習は16日間なのでもう折り返しに入ったんですね。
時間が流れるのは早いですね。
仕事のペースは今までの授業よりも早いですが、それについていくだけで毎日過ぎていくのはもったいないので、仕事以外でも意識して学びを深めていきたいと思います。

今日はCss Gridについてです。
→リファレンス

Css Gridは要素の配置を簡単に行うことができる機能です。
表のように「行」と「列」を使って整列させることができます。
親要素の中に座標をうって、子要素の場所を座標で指定する感じです。

イメージ

<div class=”wrapper”>
<div class=”one”>One</div>
<div class=”two”>Two</div>
<div class=”three”>Three</div>
<div class=”four”>Four</div>
</div>

まずこんな感じでhtmlを書きます。
One,Two,Three,Fourという子要素をwrapperで包んでます。

見えやすいように色とか線付けます。
.wrapper div{
border: 2px solid #270073;
background-color: #1234;
padding: 30px;
color: #000;
}

こうなります。

次にGridの設定です。
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
}
これで座標を指定できるようになりました。

今の表示はこんな感じですね。

ここに各要素の場所を指定していきます。

.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;
}

culumnとrowは行と列を表しており

このイメージの座標を指定してます。

単純に1とか3とか書くとその座標番号から1つだけ場所を取り、
1 / 3とか2 / 4と書くと座標番号1から3までのように場所を複数のGridに渡って指定することができます。

つまり、こうなります。

重なっているのがわかりやすいように半透明の色付けをしたのですが、この画像だけではわかりにくいので、分解してみてみましょう。

One

Two

Three

Four

どうでしょう。
複雑なレイアウトを作るときに使えそうですね。
長くなってきたので補足は明日します。

では！