grid中ul设display: grid后li仍垂直堆叠，因grid不穿透子元素内部布局；需配grid-template-columns、min-width: 0、overflow-wrap: break-word等才能实现均匀占位与内容居中。
Grid里用和- 为什么还是垂直堆叠？
因为ul默认是块级容器，li默认是块级元素——Grid不会自动把子元素的内部布局规则“穿透”进来。你对ul设了display: grid，只影响它的直接子元素（即li），但每个li自己仍是块级行为，除非你显式控制它们的尺寸或对齐方式。
常见错误现象：li高度不一致、换行错乱、文字溢出后不折行、鼠标悬停区域远大于文字范围。
- 给
ul加display: grid后，必须配grid-template-columns（比如repeat(3, 1fr)）才能分列 -
li默认不收缩，建议加min-width: 0防文字撑破格子 - 如果
li里有段落或链接，记得设overflow-wrap: break-word防长单词溢出
怎么让每个
Grid控制的是li的位置和尺寸，内容居中要靠li自身的display和对齐属性。别指望justify-items: center能搞定文字对齐——它只对齐网格项盒子本身。
使用场景：导航菜单、卡片式标签列表、响应式图标列表。
-
ul上设display: grid+gap: 0.5rem，避免手动写margin -
li设display: flex+flex-direction: column+align-items: center，再用justify-content: center垂直居中文本 - 如果
li含图标+文字，用gap: 0.25rem比margin更可靠
IE11兼容下还能用Grid布局列表吗？
不能。IE11的Grid实现是旧版语法（display: -ms-grid），不支持grid-template-areas、gap、subgrid等关键特性，且对auto-fit/auto-fill完全没反应。强行降级写法会导致维护成本飙升，实际项目中基本放弃。
性能影响：现代Grid渲染效率高于浮动或inline-block模拟的多列，但若列表项超过200个，建议配合content-visibility: auto做渲染优化。
- 检查是否真需支持IE11——多数内部系统已可明确声明不兼容
- 若必须兼容，改用
display: flex+flex-wrap: wrap更稳妥 - 用
@supports (display: grid)做渐进增强，避免CSS冲突
用Grid布局列表时，哪些CSS属性容易被忽略？
最常漏掉的是list-style: none和padding-left重置。浏览器默认会给ul加内边距和圆点，Grid布局下这些值会破坏列宽计算，尤其在fr单位场景中误差明显。
另一个隐形坑是box-sizing：Grid容器默认按content-box计算尺寸，但如果你在li里加了padding又没设box-sizing: border-box，实际占用宽度会超出预期。
- 务必在
ul上写list-style: none+padding: 0+margin: 0 -
li统一加box-sizing: border-box，避免padding/border引发换行 - 用
max-width: 100%约束图片或嵌入内容，防止撑破网格轨道
复杂点在于：Grid轨道尺寸是动态计算的，而li内容可能异步加载或字体加载延迟，导致首次渲染错位。这时候min-inline-size比min-width更准确，但需要留意Firefox对它的支持略晚于Chrome。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
