CSSグリッドレイアウトでモダンなウェブデザインを実現する方法

<style>
  .grid-container {
    display: grid; /* グリッドレイアウトを有効にする */
    grid-template-columns: repeat(3, 1fr); /* 3つの等しい幅の列を作成 */
    gap: 10px; /* グリッドアイテム間のギャップ */
  }

  .grid-item {
    background-color: #ddd;
    padding: 20px;
    text-align: center;
    border: 1px solid #ccc;
  }
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

<style>
  .grid-container-advanced {
    display: grid;
    grid-template-areas: 
      "header header"
      "sidebar content"
      "footer footer";
    grid-template-columns: 1fr 3fr; /* 左側1フラクション、右側3フラクション */
    grid-template-rows: auto; /* 行の高さを自動で設定 */
    gap: 10px;
  }

  .header {
    grid-area: header; /* grid-template-areasで指定したエリア名 */
    background-color: #6c7ae0;
    padding: 20px;
    text-align: center;
  }

  .sidebar {
    grid-area: sidebar;
    background-color: #f1a34b;
    padding: 20px;
  }

  .content {
    grid-area: content;
    background-color: #78c2ad;
    padding: 20px;
  }

  .footer {
    grid-area: footer;
    background-color: #f67875;
    padding: 20px;
    text-align: center;
  }
</style>
<div class="grid-container-advanced">
  <div class="header">ヘッダー</div>
  <div class="sidebar">サイドバー</div>
  <div class="content">コンテンツ</div>
  <div class="footer">フッター</div>
</div>

<style>
  .parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .div1 {
    grid-area: 1 / 1 / 3 / 3;
    background-color: #FFCCCB; /* 薄い赤色 */
  }

  .div2 {
    grid-area: 1 / 3 / 4 / 5;
    background-color: #ADD8E6; /* 薄い青色 */
  }

  .div3 {
    grid-area: 1 / 5 / 6 / 6;
    background-color: #90EE90; /* 薄い緑色 */
  }

  .div4 {
    grid-area: 3 / 1 / 5 / 3;
    background-color: #FFD700; /* 黄色 */
  }

  .div5 {
    grid-area: 4 / 3 / 5 / 5;
    background-color: #FFB6C1; /* 薄いピンク色 */
  }

  .div6 {
    grid-area: 5 / 1 / 6 / 5;
    background-color: #D3D3D3; /* ライトグレー */
  }
</style>
<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
</div>