掌握CSS Grid实现复杂响应式布局：从Flexbox的局限到Grid的强大

<div class="container">
  <div class="red">
    <!-- <label>A</label> -->
  </div>

  <div class="yellow">
    <!-- <label>B</label> -->
    <div class='one'></div>
    <div class='two'></div>
    <div class='three'></div>
    <div class='four'></div>
  </div>

  <div class="green">
    <!-- <label>C</label> -->
  </div>

  <div class="blue">
    <!-- <label>D</label> -->
  </div>
</div>

.container {
  display: grid;
  /* 定义网格区域，'A A'表示A区域占据两列，'B C'表示B和C各占一列，'D D'表示D区域占据两列 */
  grid-template-areas: 'A A' 
                       'B C' 
                       'D D';
  grid-template-columns: 1fr 1fr; /* 两列，各占1份可用空间 */
  grid-template-rows: 1fr 1fr 1fr; /* 三行，各占1份可用空间 */
  width: 100vw;
  height: 100vh;
  gap: 0.5rem; /* 网格间距 */
  padding: 0.5rem;
}

/* 将HTML元素分配到对应的网格区域 */
.red {
  grid-area: A;
  background-image: linear-gradient(rgba(122, 45, 45, 0.9), rgba(168, 77, 77, 0.9));
}

.yellow {
  grid-area: B;
  /* yellow内部也可以是一个网格容器，实现其子元素的复杂排列 */
  display: grid;
  gap: 0.5rem;
  grid-template-areas: 'W W W' /* W占据三列 */
                       'X Y Z'; /* X, Y, Z各占一列 */
}

.yellow > .one { grid-area: W; }
.yellow > .two { grid-area: X; }
.yellow > .three { grid-area: Y; }
.yellow > .four { grid-area: Z; }

.green {
  grid-area: C;
  background-image: linear-gradient(rgba(161, 241, 181, 0.9), rgba(101, 163, 114, 0.9));
}

.blue {
  grid-area: D;
  background-image: linear-gradient(rgba(31, 70, 177, 0.9), rgba(144, 172, 209, 0.9));
}

@media (max-width: 600px) {
  .container {
    /* 重新定义网格区域，实现元素的垂直堆叠和顺序调整 */
    grid-template-areas: 'A' /* 红 */
                         'C' /* 绿 */
                         'B' /* 黄 */
                         'D'; /* 蓝 */
    grid-template-columns: 1fr; /* 移动端只有一列 */
    /* 调整行高比例：A占1份，C占1份，B占1.5份，D占1份 */
    grid-template-rows: 1fr 1fr 1.5fr 1fr; 
  }

  .yellow {
    /* 移动端yellow内部的布局调整 */
    grid-template-areas: 'W W' /* W占据两列 */
                         'X Y' /* X, Y各占一列 */
                         'Z Z'; /* Z占据两列 */
  }
}