父元素：

关于二维布局方式：

grid-template-columns属性：

<style>
      .item {
        background-color: skyblue;
      }
      .grid1 {
        width: 100%;
        height: 200px;
        display: grid;
        /* grid-template-columns: 100px 100px 100px; */
        grid-template-columns: 1fr 2fr 1fr;
        column-gap: 24px;
        row-gap: 24px;
        /* gap:24px */
      }
</style>

  <body>
    <div class="grid1">
      <div class="column1_1 item"></div>
      <div class="column1_2 item"></div>
      <div class="column1_3 item"></div>
      <div class="column1_4 item"></div>
      <div class="column1_5 item"></div>
      <div class="column1_6 item"></div>
    </div>
  </body>

效果：

grid-template-areas属性：

<style>
  .item {
    background-color: skyblue;
  }
  .grid2 {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-areas:
      'header header header'
      'sidebar content content'
      'footer footer footer';
    gap: 10px;
  }
  header {
    grid-area: header;
  }
  aside {
    grid-area: sidebar;
  }
  main {
    grid-area: content;
  }
  footer {
    grid-area: footer;
  }
</style>
<div class="grid2">
  <header class="item">头部</header>
  <aside class="item">侧边栏</aside>
  <main class="item">内容</main>
  <footer class="item">底部</footer>
</div>