如何设置第二行列的宽度与第一行两列的总宽度相等？

以下是两种常用的实现方案，可根据你的技术栈选择：

CSS Grid 实现方案（优先推荐） #

Grid布局无需手动计算宽度，可自动适配列间距，不会出现宽度错位问题：

• 给布局容器设置display: grid，大屏断点下设置grid-template-columns: repeat(3, 1fr)实现3列布局
• 中等尺寸断点下设置grid-template-columns: repeat(2, 1fr)实现2列布局，再给第二行的单列元素设置grid-column: 1 / -1，即可让该元素从第一根网格线跨到最后一根网格线，自动占满整行宽度，刚好等于第一行两列的总宽度

示例代码：

/* 布局容器基础样式 */
.layout-container {
  display: grid;
  gap: 20px; /* 可自定义列/行间距 */
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 大屏断点：≥992px 3列布局 */
@media (min-width: 992px) {
  .layout-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 中等尺寸断点：768px~991px 2列布局 */
@media (min-width: 768px) and (max-width: 991px) {
  .layout-container {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 假设第二行的单列是第三个子元素 */
  .layout-container .item:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* 小屏断点：<768px 1列布局，可按需自定义 */
@media (max-width: 767px) {
  .layout-container {
    grid-template-columns: 1fr;
  }
}

Flex 布局实现方案 #

如果使用Flex布局，需要手动计算宽度扣除间距：

• 给布局容器设置display: flex; flex-wrap: wrap开启换行
• 中等尺寸断点下给前两列设置width: calc(50% - 10px)（10px为总间距的一半），第二行的单列设置width: 100%即可
• 所有元素必须统一设置box-sizing: border-box，避免内边距、边框撑宽元素导致布局错位

示例代码：

.layout-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}
.layout-item {
  box-sizing: border-box;
}

/* 大屏3列 */
@media (min-width: 992px) {
  .layout-item {
    width: calc(33.333% - 13.333px);
  }
}

/* 中等尺寸2列 */
@media (min-width: 768px) and (max-width: 991px) {
  .layout-item {
    width: calc(50% - 10px);
  }
  .layout-item:nth-child(3) {
    width: 100%;
  }
}

/* 小屏1列 */
@media (max-width: 767px) {
  .layout-item {
    width: 100%;
  }
}

响应式框架适配方案 #

如果使用Bootstrap等现成响应式框架，中等尺寸断点下直接给前两个列元素加col-md-6类，第三列元素加col-md-12类即可实现需求，框架会自动处理间距和宽度适配。

注意：所有方案的断点数值可根据你的设计需求自行调整，和现有响应式规则保持一致即可

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