用display: grid搭配grid-template-columns: 1fr 1fr可最简实现两列等宽布局，自动平分容器宽度，结合gap控制间距，无需定位且天然响应式。
直接用 display: grid 搭配 grid-template-columns 就能替代 HTML 表格实现视觉上的“表格样式”，无需语义混乱的 <table> 嵌套，且更易响应式控制。
<h3>两列等宽布局：用 <code>1fr 1fr 最简实现
这是最常见需求——比如配置项列表、表单字段对、数据卡片分组。关键不是“模拟表格”，而是按需分配空间：
-
grid-template-columns: 1fr 1fr表示两列平分容器宽度；若想左窄右宽，改用minmax(120px, 1fr) 2fr - 必须设
gap（或row-gap/column-gap），否则相邻项会贴在一起，不像表格有天然边距 - 子元素无需额外定位，Grid 自动按源顺序从左到右、从上到下填入轨道
- 若项数为奇数（如 5 个），第 5 项会单独占一行第一列，第二列留空——这是预期行为，不用加空占位符
多行多列卡片网格：用 repeat(auto-fit, minmax())
当渲染动态数组（如商品列表、统计卡片）时，固定列数不现实，应让列数随容器宽度自适应：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))表示：每列最小 280px，最大撑满剩余空间，列数自动增减 - 搭配
grid-auto-rows: minmax(120px, auto)可让每行高度随内容伸缩，避免高度塌陷或溢出 - 慎用
grid-template-rows: repeat(3, 200px)这类固定行高——一旦内容超出，文字会被裁切，且无法响应内容变化 -
auto-fill和auto-fit表现不同：auto-fill会渲染所有可能列（含空列），auto-fit会收缩空列，推荐后者
跨行跨列对齐：避开 grid-column 硬编码
需要标题跨两列、侧栏固定位置时，硬写 grid-column: 1 / 3 容易错位，尤其配合响应式变化：
- 优先用
grid-template-areas命名区域，例如："header header" "main sidebar" "footer footer"，再用grid-area: "main"绑定元素 - 命名区域在媒体查询中可整体重排，比如移动端改成
"header" "main" "sidebar" "footer"，逻辑清晰不易漏 - 避免混用
float或inline-block——它们会脱离 Grid 流，导致布局断裂 - 如果只是简单跨列，
grid-column: span 2比1 / 3更安全，它不依赖绝对线号，适配性更强
兼容性与性能注意点
现代浏览器已全面支持 Grid，但仍有细节影响实际效果：
- IE11 不支持
gap，需降级为grid-column-gap+grid-row-gap（注意：IE11 对fr单位支持不稳定，建议 fallback 用px或%） - 大量 Grid 项（如 >200 个）滚动时可能触发重排，此时应考虑虚拟滚动，而非单纯靠 CSS 优化
-
grid-template-areas要求所有子元素都声明grid-area，漏写会导致区域未填充，调试时容易忽略 - 不要给 Grid 容器设
height: 100%后再期待子项撑开——Grid 项默认不继承父高，需显式设grid-auto-rows或用min-height
真正麻烦的不是写几行 Grid 代码，而是当设计稿突然要求“PC端三列、平板双列、手机单列，且某区块始终居中跨列”时，如何让 grid-template-areas 和 minmax() 配合得不打架——这时候才看出前期是否预留了足够灵活的命名和断点策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
