css grid 本身不解决多终端兼容，需结合 minmax()、auto-fill/auto-fit、媒体查询及语义化 html；推荐用 repeat(auto-fit, minmax(250px, 1fr))) 实现自适应列数，配合 grid-template-areas 切换骨架，subgrid 解决卡片内对齐，grid 与 flex 应各司其职。
直接说结论：CSS Grid 本身不解决「兼容多终端」，它只是提供了一套二维布局能力；真正让布局适配多终端的，是 minmax()、auto-fill/auto-fit 和媒体查询的组合用法——而且必须配合语义化 HTML 结构，否则再 fancy 的 Grid 写法也会在小屏上崩。
用 repeat(auto-fill, minmax()) 实现无断点自适应列数
这是最常被误用也最容易见效的写法。很多人写成 repeat(4, 1fr)，结果在手机上四列挤成一条缝；正确做法是让列宽有弹性下限和上限：
-
minmax(250px, 1fr)表示：每列至少 250px，超出部分按比例均分剩余空间 -
auto-fill会尽可能多地填充列（哪怕内容不够也留空），auto-fit则会把空列收缩掉，更常用 - 必须配合
gap而非margin，否则在窄屏下 gap 可能撑破容器
示例：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
用 @media + grid-template-areas 控制整体骨架切换
当页面结构发生质变（比如桌面端三栏、移动端堆叠），仅靠列数调整不够，必须重定义区域流向。这时候 grid-template-areas 比手动算 grid-column 更可靠：
- 桌面端写成
"header header sidebar" "main main sidebar" "footer footer footer" - 移动端改写为
"header" "main" "sidebar" "footer"，同时把grid-template-columns改成1fr - 注意：所有参与
grid-area的元素必须是网格容器的直接子元素，嵌套层级多了就失效
避免在 Grid 里嵌套 Grid 处理“卡片内对齐”问题
比如商品卡片里图片、标题、价格要底部对齐，很多人给卡片加 display: grid 再设 grid-template-rows: 1fr auto —— 这在单卡时有效，但多卡高度不一致时会出问题。2025 年起主流方案是用 CSS Subgrid：
- 父容器设
display: grid并定义轨道（如grid-template-rows: 1fr auto） - 卡片设
display: subgrid，自动继承父级行轨道，无需重复定义 - 目前支持 Chrome 114+、Firefox 110+、Safari 16+；不支持时需 fallback 到
display: flex+margin-top: auto
关键点：Subgrid 不是“嵌套 Grid”，而是“复用父级轨道”，所以不会破坏外层网格流。
Grid + Flex 混合使用的边界在哪
别迷信“全 Grid”。实际项目中，Grid 负责宏观骨架（header/main/footer 区域划分），Flex 负责微观组件（如导航菜单横向排列、卡片内按钮右对齐）：
- Grid 做不到的：单行内文字截断+图标右对齐、按钮组等间距分布、垂直居中单行文本
- Flex 做不到的：跨区域定位（如标题横跨两列）、行列同时约束、响应式区域重排
- 常见错误：在 Grid 容器里给子项设
display: flex后又强行用justify-self对齐——此时应优先用 Flex 自身的justify-content
真正容易被忽略的是：Grid 的 fr 单位在 flex 容器里无效，而 Flex 的 flex-grow 在 Grid 项里也不起作用——两者能力边界必须划清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
