使用css实现多列布局推荐Grid和flexbox。Grid适用于二维复杂布局，如三列等宽grid-template-columns: 1fr 1fr 1fr；Flexbox适合一维简单排列，通过display: flex和flex: 1均分空间；响应式可采用repeat(auto-fit, minmax(250px, 1fr))自动换行适配移动端。
实现多列布局在CSS中有多种方式，最常用的是使用 Flexbox、Grid 和 Float（较老方法）。现代开发推荐使用 Flexbox 或 Grid，它们更灵活、易控制。
使用 CSS Grid 实现多列布局
Grid 是专为二维布局设计的工具，适合创建复杂的多列结构。
基本示例：三列等宽布局
<div class="grid-container"> <div>列 1</div> <div>列 2</div> <div>列 3</div> </div>
立即学习“前端免费学习笔记（深入）”；
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
说明：
- 1fr 表示每列占据相等的可用空间
- gap 设置列之间的间距
- 也可以用具体宽度如
200px 1fr 2fr混合布局
使用 Flexbox 实现多列布局
Flexbox 是一维布局模型，适合简单行或列排列。
<div class="flex-container"> <div class="col">列 1</div> <div class="col">列 2</div> <div class="col">列 3</div> </div>
css
.flex-container { display: flex; gap: 16px; } <p>.col { flex: 1; /<em> 均分容器空间 </em>/ }
若要固定某列宽度：
.col:first-child { flex: 0 0 200px; /* 不伸缩，基础宽度 200px */ }
响应式多列布局建议
在小屏幕上，多列应自动堆叠。可通过媒体查询或使用 auto-fit 配合 Grid 实现自适应。
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
解释：
- 当容器宽度不足时，列会自动换行
- 每列最小 250px，最大 1fr
- 无需额外媒体查询即可适配手机
基本上就这些。Grid 更适合复杂网格，Flexbox 适合简单对齐。根据需求选择合适方案。