CSS Grid 可从容器层统一定义列轨道，用 grid-template-columns（如 repeat(4, 1fr) 80px）配合 fr、minmax 和 gap 实现响应式、易维护的列表布局，避免子项重复设宽。
列表布局中列宽不一致、样式重复，根本原因常是每个列表项单独写宽度或用不同类名控制，导致维护困难。用 CSS Grid 可以从容器层统一定义列轨道，让所有子项自动对齐，彻底避免重复声明。
用 grid-template-columns 固定列结构
在列表容器上设置 display: grid，并通过 grid-template-columns 明确定义每列宽度（如 1fr 2fr 100px），所有直接子项（即每行列表项）将严格按此轨道排列，无需再给每个子元素设 width 或 flex-basis。
- 推荐使用
fr单位分配剩余空间，比百分比更灵活且不依赖父容器具体像素值 - 固定列（如操作按钮列）用
px或minmax(80px, max-content)防止内容撑开 - 避免在子项上写
grid-column，除非需要跨列；常规列表保持自然流式填充即可
用 repeat() 简化多列重复定义
当列表有 5 列且前 4 列等宽，最后一列固定，可写成：grid-template-columns: repeat(4, 1fr) 80px;
比手写 1fr 1fr 1fr 1fr 80px 更简洁，也方便后期增减列数。
-
repeat(auto-fit, minmax(200px, 1fr)))适合响应式卡片列表，自动换行并均分可用空间 - 搭配
gap统一内外边距，替代各子项的 margin，减少样式碎片
用 class 复用 grid 布局规则，而非重复写 grid 代码
把常用列结构抽成语义化类名，比如：.list-layout--3col { grid-template-columns: 2fr 3fr 1fr; }.list-layout--actions { grid-template-columns: 1fr minmax(120px, max-content); }
在不同列表容器上复用这些类，样式集中、修改一处，全局生效。
- 避免在多个地方复制粘贴相同的
grid-template-columns声明 - 结合 CSS 自定义属性（如
--col-gap: 16px）进一步提升可配置性 - 用
:is()或:where()批量选中不同列表容器，统一应用基础 grid 属性
不复杂但容易忽略：Grid 是布局工具，不是内容排版工具。列宽统一后，文字截断、图片缩放、按钮对齐等细节仍需单独处理，但它们已不再干扰列结构本身。
