使用CSS Grid和fr单位可快速创建响应式三栏布局，通过grid-template-columns: 1fr 1fr 1fr实现等宽三栏，结合gap设置间距，并利用媒体查询在小屏幕上切换为单栏；为适应不同设备，可使用minmax(250px, 1fr)配合repeat(auto-fit)实现自动换行与列数调整，避免硬编码断点，提升布局灵活性与可维护性。
要快速实现一个响应式的三栏布局，CSS Grid 是目前最简洁高效的方式。结合 grid-template-columns 和 fr 单位，可以轻松创建等宽或按比例分配的三栏结构，并通过媒体查询适配不同屏幕尺寸。
使用 Grid 和 fr 单位定义三栏布局
Grid 布局中的 fr（fraction）单位表示“可用空间的一部分”，非常适合用于等分容器宽度。比如三等分容器，只需设置三列各占 1fr。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三栏等宽 */
gap: 20px; /* 栏间距 */
}
这样三栏会自动均分父容器的宽度，无需计算百分比，代码更直观。
让布局具有响应性
在小屏幕上，三栏可能显得太窄，影响阅读。可以通过媒体查询切换为单栏或两栏布局。
立即学习“前端免费学习笔记（深入）”；
/* 默认移动端：单栏 */
.container {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
<p>/<em> 平板及以上：三栏 </em>/
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
}
}</p>也可以根据内容重要性设置不等宽的三栏，例如侧边栏窄一些：
/* 左右窄，中间宽 */ grid-template-columns: 1fr 2fr 1fr;
结合 minmax() 实现更灵活的响应式
使用 minmax() 可以设定每列最小和最大宽度，配合 repeat() 和 auto-fit，实现自适应列数。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
这行代码的意思是：尽可能多地放入宽度不小于 250px 的列，每列等分剩余空间。屏幕足够宽时显示三栏，变窄时自动变为两栏或一栏，无需手动写多个断点。
总结一下关键点：
-
display: grid开启网格布局 -
grid-template-columns: 1fr 1fr 1fr快速实现等宽三栏 -
fr单位比百分比更灵活，自动分配剩余空间 - 搭配
minmax()和auto-fit实现真正响应式多栏 - 媒体查询可进一步控制不同设备下的布局形态
基本上就这些。用 Grid 写三栏布局，几行代码就能搞定，维护也方便。
