如何用纯CSS实现自定义列？不使用Bootstrap/W3等CSS框架

完全懂你的需求——不用任何框架，纯手写CSS搞定列布局，其实没你想的复杂，下面给你几种实用方案，附代码示例，你可以根据项目场景选：

1. 浮动（Float）布局（兼容旧浏览器） #

这是比较传统的方案，适合需要兼容IE8及以上的场景：

示例HTML结构（假设你的简易代码是类似这样）： #

<div class="container">
  <div class="column column-1">第一列内容</div>
  <div class="column column-2">第二列内容</div>
  <div class="column column-3">第三列内容</div>
</div>

对应CSS代码： #

/* 清除容器浮动，避免父元素高度塌陷 */
.container::after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  padding: 15px;
  box-sizing: border-box; /* 让padding包含在宽度内，防止布局溢出 */
}

/* 自定义列宽，比如三列均分 */
.column-1, .column-2, .column-3 {
  width: 33.333%;
}

/* 如果是两列布局，就设置width: 50%，以此类推 */

注意：浮动布局必须给父容器清除浮动，上面的::after伪元素方法是最常用的清除浮动技巧。

2. Flexbox布局（现代浏览器首选） #

Flexbox是当前最流行的布局方式，语法简洁、灵活性拉满，适合绝大多数现代项目：

HTML结构和上面一致，CSS改成： #

.container {
  display: flex; /* 将容器转为flex容器 */
  gap: 20px; /* 列之间的间距，替代margin，避免外边距合并问题 */
}

.column {
  flex: 1; /* 让所有列自动均分容器宽度 */
  padding: 15px;
  box-sizing: border-box;
}

/* 如果需要某列固定宽度，比如第一列固定200px */
.column-1 {
  flex: 0 0 200px; /* flex-grow:0 不放大; flex-shrink:0 不缩小; flex-basis:200px 基础宽度 */
}

还能轻松实现响应式，比如小屏幕下自动切换为单列：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

3. Grid布局（复杂二维布局首选） #

如果你的布局是带多行多列的复杂网格结构，Grid布局是最佳选择：

对应CSS代码： #

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列均分，fr是网格专用单位，代表剩余空间分配 */
  gap: 15px; /* 同时控制列和行的间距 */
}

.column {
  padding: 15px;
  box-sizing: border-box;
}

/* 也可以自定义列宽，比如第一列200px，剩下两列均分 */
/* grid-template-columns: 200px 1fr 1fr; */

同样支持响应式适配：

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

关键注意事项 #

• 务必添加box-sizing: border-box;，这样元素的padding和border不会额外增加宽度，避免布局超出容器范围。
• 响应式调整可以通过媒体查询@media来适配不同屏幕尺寸下的列数和宽度。
• Flex和Grid的gap属性比margin更省心，能避免相邻元素外边距合并的问题。

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