grid布局入门：三栏卡片不用float也能对齐

上周改一个后台首页，三张卡片用 float 排，屏幕一窄就掉下来一张，右边还空一大块。换成grid布局，四行代码就齐了，清除浮动那套写法也省了。

display:grid 加列模板，先把三栏搭起来

父容器写 display:grid，再用 grid-template-columns 定列宽。repeat(3, 1fr) 表示三等分，1fr 按剩余空间分配。间距用 gap:16px，不用再给每个卡片加 margin，也不会出现末尾那行多出边距的问题。

.card-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

响应式：auto-fit 配 minmax 少写媒体查询

固定三列在手机上会挤成一团。把列模板改成 repeat(auto-fit, minmax(260px, 1fr))，容器不够宽时自动减少列数，卡片最小 260px，多出来的空间平均分。这一行能顶掉大半媒体查询。要精确控制某个断点，再补一条 @media 改列数也不迟。注意 auto-fill 和 auto-fit 的区别：前者会留空列，后者让现有卡片撑满。

跨列、行高和对齐

做仪表盘时常让某块图占两列，给子元素写 grid-column: span 2 就行。整个页面可以用 grid-template-areas 画一张布局图，给每块起名字，代码读起来直观，改版时只动字符串。行高用 grid-auto-rows: minmax(120px, auto)，内容多的时候不会溢出。对齐用 align-items 和 justify-items，比调 line-height 稳。

兼容性和老项目

grid布局在主流浏览器里支持已经很完整，Chrome、Edge、Firefox 和 Safari 的新版本都没问题。只有要兼容 IE 的老后台才需要绕开，那种项目一般还在用 float 或者表格布局，改动成本高，不值得为了一个页面重构。新页面直接用，别再用表格拼结构。

判断标准很简单：新项目、现代浏览器、要二维对齐，用 grid；只排一行按钮或者文字，flex 更轻。两者不冲突，一个页面里混着用很正常。