Grid用repeat(3, 1fr)替代width:33.33%更稳，避免百分比错位；用gap代替margin防破坏均分；响应式用auto-fit+minmax自动适配列数；align-items:end轻松底部对齐；现代浏览器全支持，IE11需降级。
Grid怎么替代width: 33.33%这种老套路
直接用grid-template-columns: repeat(3, 1fr)，比算百分比快、稳、不掉坑。百分比在缩放或有padding/margin时容易错位，而1fr是按可用空间动态均分，浏览器自己算——你不用管小数点后几位。
常见错误现象：width: 33.33%三列加起来可能超100%（比如加了border或padding），触发换行；或者容器宽度不是整除3，导致最后一列被挤下去。
- 用
display: grid代替float或inline-block布局，父容器加这一行就够了 - 别再给子项设
width，Grid里子项宽度由父容器的grid-template-columns统一控制 - 如果要留间隙，用
gap（不是margin），它不占列宽，不会破坏1fr均分逻辑
响应式场景下怎么让Grid自动变列数
用@media配合grid-template-columns最干净，比写一堆max-width + 百分比组合靠谱得多。
使用场景：PC端三列、平板两列、手机单列。别用flex-wrap硬撑，也别靠JS监听resize重排——CSS Grid原生支持断点切换列数。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))是万能解法：最小每列300px，空间够就多列，不够就自动收成一列 -
auto-fit和auto-fill区别很大：auto-fit会合并空轨道，auto-fill则保留所有可能轨道（即使空着），通常选auto-fit - 注意
minmax()里第一个值是min，不是max，写反了会导致小屏下列宽爆炸
Grid里内容高度不一致时怎么对齐底部
用align-items: end或子项上加align-self: end，比用flex的margin-top: auto或JS算高度靠谱得多。
常见错误现象：三张卡片，文字行数不同，底部按钮高低不一，用户一眼就觉得“这页面没做完”。百分比布局完全没法处理这个。
- 父容器设
display: grid+align-items: end，所有子项底部自动对齐 - 如果只要某几个子项对齐底部，单独给它们加
align-self: end就行 - 别依赖
height: 100%或position: absolute去拉底——Grid里这些反而会破坏流式行为
兼容性差吗？IE不支持怎么办
现代项目基本可以放心用，但如果你必须支持IE11，display: grid不能用，它的实现是另一套（display: -ms-grid），而且不支持fr单位和gap，维护成本高到不值得。
性能影响几乎为零：Grid是渲染引擎原生布局模型，比用JS反复计算宽度+重排快得多；Chrome/Firefox/Safari/Edge全支持，连iOS Safari 10.3+都OK。
- 检查目标用户UA，如果IE占比低于0.5%，直接不兼容（用
@supports (display: grid)做渐进增强） - 真要兼容IE，用
float或inline-block降级，别试图用旧版Grid hack——bug多、文档少、团队没人愿碰 -
gap在Firefox 63+、Chrome 66+才稳定，如果要支持更老版本，用padding模拟，但记得父容器加overflow: hidden防塌陷
真正复杂的是嵌套Grid和subgrid（目前仅Firefox支持），日常三列布局根本用不到。别被“高级功能”带偏，repeat(3, 1fr) + gap + align-items 这三招，已经覆盖95%的多列排版需求。
