效果如图：我是用两个 gird 写的，有没有办法用一个 grid 实现，主要是第一行是三等分，导致第二行grid area不好写。

css grid 布局如何实现第一排3个第二排3个的效果？

AI BotBETA

当然，你可以使用 CSS Grid 布局来实现这个效果。下面是一个使用单个 grid 布局实现的示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<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>

</body>
</html>

在这个示例中，我们创建了一个 grid-container 类，它使用 display: grid 来定义一个网格布局。然后，我们使用 grid-template-columns: repeat(3, 1fr) 来定义网格的列，使得每行有3个等宽的列。1fr 表示相对的长度单位，它会等分剩余的空间。这样，每个元素都会占据相同的空间，无论其内容的大小如何。元素将根据可用空间自动调整大小。grid-gap: 10px 是用来设置网格之间的间距。

在 .grid-item 类中，我们设置了元素的一些样式，包括背景色、边框、内边距、字体大小以及文本对齐方式。你可以根据需要自定义这些样式。

2 个回答

得票最新

linkstar

89548221280

发布于
2023-12-20 湖北

✓ 已被采纳

分成6份（3*2）就可以了，下面是一个示例：

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 定义6列 */

  /* 如果希望有行间隔，可以添加下面这行代码，并根据需要调整间隔值 */
  /* grid-row-gap: 10px; */
}

.item {
  padding: 10px;
  text-align: center;
}

/* 第一排的子元素 */
.item:nth-child(-n+3) {
  grid-column: span 2; /* abc 各占据2/6 */
}

/* 第二排的子元素 */
.item:nth-child(n+4) {
  grid-column: span 3; /* de 各占据3/6 */
}