如何使用CSS实现四元素两行特定网格布局？

要实现你说的这种4元素网格布局——第一个元素占满整行，第二、三、四个元素平分宽度，总共两行，CSS Grid是最顺手的方案，核心用到这些CSS属性：

关键属性解析 #

• display: grid：把容器转为网格布局容器，开启Grid的二维布局能力
• grid-template-columns：定义网格列的尺寸，用repeat(3, 1fr)能让三列精准平分容器宽度
• grid-column：控制网格项的列跨度，让第一个元素跨满所有列
• gap：设置网格项之间的间距（替代旧版grid-gap，现代浏览器都支持）

完整可运行代码 #

CSS #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽分配空间 */
  gap: 20px; /* 网格项之间的间距 */
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

.item-1 {
  grid-column: 1 / -1; /* 从第一列跨到最后一列，自动占满整行 */
}

HTML #

<div class="grid-container">
  <div class="item item-1">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

代码说明 #

• display: grid：让.grid-container成为网格容器，内部元素按网格规则排列
• grid-template-columns: repeat(3, 1fr)：创建3个等宽列，1fr表示占容器可用空间的1份，三列各占1/3宽度
• grid-column: 1 / -1：第一个元素从第一列起始位置延伸到最后一列结束位置，自动占满整行，比硬写span 3更灵活，就算后续修改列数也不用改这行代码
• gap: 20px：统一设置网格项的行间距和列间距，代码更简洁

如果你想用Flexbox也能实现，但Grid在这种二维布局场景下更直观，Flexbox需要手动计算宽度：

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 calc(33.333% - (20px * 2)/3); /* 减去间距的影响，保证三列平分 */
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

.item-1 {
  flex: 1 1 100%; /* 占满整行 */
}

内容的提问来源于stack exchange，提问作者Karanveer