三栏布局用CSSGrid和fr单位实现

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS Grid与fr单位实现三栏响应布局》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

使用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 写三栏布局，几行代码就能搞定，维护也方便。

今天关于《三栏布局用CSSGrid和fr单位实现》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！