概要

グリッドレイアウトのcssのgrid-template-areasを使っていきます！

今回作成するレイアウト

こんな感じのレイアウトを作成していきます！

サイドバーがあるようなよく見るレイアウトになっています。

こちらはgridシステムを活用したgrid-template-areasを使用することで簡単に実装することができます！！

grid-template-areasとは？

 <section class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
  </section>

.grid-container {
  display: grid;
　　　　grid-template-areas: "item1 item2"
    "item3 item2"
    "item3 item4"
    "item3 ."
    "item5 .";
}

このように子の親要素にdisplay: gridを設定するとgridレイアウトの準備が整います。
grid-template-areasの使い方としてはエリアを追加していくイメージです。

"item1 item2"となっている部分に関しては左カラムにitem1, 右カラムにitem2が来るようなイメージになります。
"item3 item2"は左にitem3 右にitem2です。

つまりこれは横に2階層、縦に5階層のレイアウトになっているということです。
そして子要素にはgrid-areaプロパティを追加することによって指定することができます。

例

grid-area: item1;

今回の本番のコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <section class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
  </section>
</body>
</html>

.container {
  display: grid;
  grid-template-areas: "item1 item2"
    "item3 item2"
    "item3 item4"
    "item3 ."
    "item5 .";

  grid-template-rows: 200px 100px 300px 400px 500px;
  grid-template-columns: 1fr 325px;
  gap: 35px;
}

.item1 {
  grid-area: item1;
  background-color: #8ca0ff;
}

.item2 {
  grid-area: item2;
  background-color: #ffa08c;
}

.item3 {
  grid-area: item3;
  background-color: #ffff64;
}

.item4 {
  grid-area: item4;
  background-color: #8cffa0;
}

.item5 {
  grid-area: item5;
  background-color: red;
}

説明すると先程の通り親のcontainerにはdisplay: gridとgrid-template-areasが設定されています。

  grid-template-rows: 200px 100px 300px 400px 500px;
  grid-template-columns: 1fr 325px;
  gap: 35px;

こちらの部分はrowsに関してはrowsの部分5階層に分けた際のpxを表しています。

こんなイメージですね。
これは説明するためにpxで指定しましたが、実際に要素に合わせて高さを合わせタイなどがあったら

grid-template-rows: repeat(5, auto);

みたいに設定することもできます。
こちらはrowsを5階層欲しい、pxに関してはautoで調整してー！といった指示になります。

grid-template-columns: 1fr 325px;

こちらに関してはcolumnのレイアウトを指定しています。
ifrは残り全てを表します。
つまり左カラムを325pxに設定して、残りは1frなので画面幅に応じて変動するイメージです。

gapに関してはitemの余白をと調整することができます。

なので全ての要素の余白が35px act言うわけです。
ちなみにcolumn-gapとすればcolumnだけの余白が
row-gapプロパティを設定するとrowだけの余白を設定することができます。

レスポンシブデザインに関してもitem順番を変更していけば簡単に設定することができます！
是非試してみましょう！！

お疲れさまでした！

grid-template-areasを使いこなす

概要

今回作成するレイアウト

grid-template-areasとは？

今回の本番のコード