CSS Grid网格布局怎么用？grid-template-columns轻松搞定网页排版

很多新手学完CSS Flexbox弹性布局后，做一排按钮、一个导航栏都没问题，可一到整页排版就懵了：左边栏、右边内容、底部版权，这种“横竖都要排”的活儿，Flexbox干着费劲。老陈今天给你介绍网页布局的另一把利器——CSS Grid网格布局，它专门解决二维排版，配合grid-template-columns一行就能搞定。

一、Flexbox和Grid到底什么区别

一句话：Flexbox是一维布局，要么横排要么竖排；Grid是二维布局，横和竖一起管。所以规律很简单——局部小元件用Flexbox，整页大框架用Grid。两者不是替代关系，是搭档。

二、三行代码搭出一个自适应卡片网格

这是Grid最常用也最惊艳的场景：一排卡片，屏幕宽就多列、窄就少列，不用写媒体查询。核心就一句grid-template-columns。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

意思是：每列最少200像素，能放几列放几列（auto-fill），剩下的空间用1fr平分。窗口一缩放，列数自动变，响应式就这么简单。

三、Grid常用属性逐个讲

• grid-template-columns：定义列，比如 1fr 1fr 1fr 就是三等分三列
• grid-template-rows：定义行高，用法和列一样
• gap：行列间距，替代老写法grid-gap，写一次同时管横竖
• justify-items / align-items：控制单元格内内容的对齐

fr单位到底是什么

fr是分数形式（fraction），代表“剩余空间的一份”。grid-template-columns: 2fr 1fr 就是总宽分成三份，第一列占两份、第二列占一份。比算百分比省事，还自动扣除gap。

四、实战：用Grid做两栏页面布局

最常见的需求：左边固定200像素侧边栏，右边自适应主内容。两行就够：

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
}

要再加顶部和底部通栏，把行也定义出来即可：

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

第一行auto是头部，最后一行的auto是底部，中间1fr是内容区，整个页面骨架就立起来了，比用float和定位清爽太多。

五、新手最容易踩的3个坑

• 坑一：把Grid当Flexbox用，只在一条轴上排，反而把简单事搞复杂
• 坑二：忘记设display:grid，写的列规则全不生效，还以为是语法错了
• 坑三：列宽写死像素，丢了自适应，不如多用fr和minmax

老陈总结

CSS Grid不是要取代Flexbox，而是补全它的短板。老陈建议你马上动手：打开浏览器随便写个ul列表，套上display:grid加repeat(auto-fill, minmax(150px,1fr))，看看卡片怎么自动换行。把这个套路练熟，以后做产品列表、图片墙、后台布局都省一大半力气。