在 CSS Grid 布局中实现 上两栏、下三栏 的布局，可以通过定义网格区域或调整网格单元格的跨度来实现。以下是几种实现方式及代码示例：

---

方法 1：使用 grid-template-areas（直观）

通过命名网格区域直接控制布局结构：

<template>
  <div class="grid-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>
  </div>
</template>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "top-left top-right ."
    "bottom-left bottom-center bottom-right";
  gap: 5px;
  background: lightslategray;
}
div {
  background: lightblue;
  text-align: center;
}

.item1 {
  grid-area: top-left;
}
.item2 {
  grid-area: top-right;
}
.item3 {
  grid-area: bottom-left;
}
.item4 {
  grid-area: bottom-center;
}
.item5 {
  grid-area: bottom-right;
}
</style>

方法 2：调整单元格跨度（灵活控制）

通过 grid-column 和 grid-row 手动控制单元格跨度：

<template>
  <div class="grid-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>
  </div>
</template>

<style scoped>
div {
  background: lightblue;
  text-align: center;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 最大列数 */
  grid-template-rows: 40px 40px; /* 两行 */
  gap: 5px;
  background: lightslategray;
}

/* 让第一行的两个元素各占1.5fr(相当于两列) */
.item1,
.item2 {
  grid-column: 3;
}

/* 或者更精确的控制 */
.item1 {
  grid-column: 1 / 4;
}
.item2 {
  grid-column: 4 / 7;
}
.item3 {
  grid-column: 1 / 3;
}
.item4 {
  grid-column: 3 / 5;
}
.item5 {
  grid-column: 5 / 7;
}
</style>

方法 3：嵌套 Grid 容器（更实现复杂的样式）

如果布局更复杂，可以嵌套 Grid：

<template>
  <div class="container">
    <div class="top">
      <div class="top-left">上左</div>
      <div class="top-right">上右</div>
    </div>
    <div class="bottom">
      <div class="bottom-item">下1</div>
      <div class="bottom-item">下2</div>
      <div class="bottom-item">下3</div>
    </div>
  </div>
</template>

<style scoped>
div {
  text-align: center;
  background: lightblue;
}
div[class="container"], div[class="top"], div[class="bottom"] {
  background: lightslategray;
}
.container {
  display: grid;
  grid-template-rows: auto auto;
  gap: 5px;
}

.top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
  gap: 5px;
}
</style>

关键点总结

1. grid-template-areas：适合结构清晰的布局，直观易维护。
2. 单元格跨度：通过 grid-column 和 grid-row 精细控制。
3. 嵌套 Grid：适合复杂布局，但可能增加 HTML 层级。

根据实际需求选择最合适的方式！

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24