如何仅使用CSS实现列宽可变的响应式四列布局？

嘿，我来帮你搞定这个响应式可变列宽四列布局的问题！你之前用table/table-cell的思路能实现基础的均分，但要做到列宽灵活可变+自适应不同屏幕，用Flexbox或者CSS Grid会更顺手——这俩现在是前端布局的主流方案，灵活性和可维护性都比table布局强太多，我给你详细拆解两种实现方式：

Flexbox是处理一维行/列布局的绝佳工具，能轻松实现列宽自适应、自动换行，还能自定义某列的占比。

先看完整代码：

<style>
/* 行容器：设置为Flex容器 */
.row {
  width: 100%;
  display: flex;
  /* 列之间加间距，可选，根据需求调整 */
  gap: 1rem;
  /* 屏幕空间不够时，列自动换行 */
  flex-wrap: wrap;
}

/* 基础列样式 */
.col {
  /* 核心属性：flex-grow(剩余空间分配比例) | flex-shrink(是否收缩) | flex-basis(基础宽度) */
  /* 默认四列均分，减去gap的影响，确保刚好放下 */
  flex: 1 1 calc(25% - 0.75rem);
  /* 给列设置最小宽度，避免缩得太窄影响阅读，可选 */
  min-width: 200px;
  padding: 1rem;
  box-sizing: border-box; /* 让padding不影响列的总宽度 */
}

/* 各列背景色，按需修改 */
.col1 { background-color: #89ffa2; }
.col2 { background-color: #b2f0f9; }
.col3 { background-color: #ffa7a7; }
.col4 { background-color: #fff689; }

/* 响应式适配：平板屏变两列 */
@media (max-width: 768px) {
  .col {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

/* 手机屏变单列 */
@media (max-width: 480px) {
  .col {
    flex: 1 1 100%;
  }
}
</style>

<div class="row">
  <div class="col col1">This is column 1</div>
  <div class="col col2">This is column 2 with more content to show how Flexbox automatically adjusts column heights</div>
  <div class="col col3">This is column 3</div>
  <div class="col col4">This is column 4</div>
</div>

关键细节解释： #

• display: flex：把.row变成Flex容器，子元素.col自动成为Flex项，默认横向排列
• flex: 1 1 calc(25% - 0.75rem)：这是控制列宽的核心，25%是四列均分的基础宽度，减去0.75rem是为了抵消gap的间距，避免列溢出容器；1 1表示列可以自由伸缩（剩余空间自动分配，空间不足时自动收缩）
• flex-wrap: wrap：当屏幕宽度不足以放下四列时，列会自动换行，不用额外写复杂逻辑

如果想让某一列更宽，比如让第一列占30%，其他三列均分剩余空间，只需要给.col1单独设置flex: 1 1 30%，其他.col设置flex: 1 1 calc((70% - 2*1rem)/3)就行，非常灵活。

CSS Grid是专门为二维布局设计的，代码更简洁，对于规整的多列布局，甚至不用写媒体查询就能实现自动响应式。

完整代码：

<style>
.row {
  width: 100%;
  display: grid;
  /* 核心：自动适配列数，每列最小200px，最大平分剩余空间 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 列/行间距 */
  gap: 1rem;
}

.col {
  padding: 1rem;
  box-sizing: border-box;
}

.col1 { background-color: #89ffa2; }
.col2 { background-color: #b2f0f9; }
.col3 { background-color: #ffa7a7; }
.col4 { background-color: #fff689; }
</style>

<div class="row">
  <div class="col col1">This is column 1</div>
  <div class="col col2">This is column 2 with more content to show how Grid automatically adjusts column heights</div>
  <div class="col col3">This is column 3</div>
  <div class="col col4">This is column 4</div>
</div>

关键细节解释： #

• grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))：这行代码堪称魔法！auto-fit会自动根据屏幕宽度计算能放下多少列；minmax(200px, 1fr)表示每列最小宽度200px，最大宽度占满剩余空间（1fr是分数单位，每列占1份）。这样不用写媒体查询，屏幕变窄时列会自动减少，完全自适应
• Grid默认会让所有列的高度保持一致，不用额外处理，非常适合卡片类布局

你之前用的display: table方案虽然能实现均分列宽，但有几个明显局限：

1. 很难灵活调整某一列的占比，比如想让某列更宽需要额外处理
2. 响应式换行非常麻烦，需要把table改成block，逻辑复杂
3. 整体布局的灵活性远不如Flexbox/Grid，无法应对复杂的布局需求

所以更推荐你用上面的两种方案，纯CSS实现，完全满足列宽可变+响应式的需求。

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