17370845950

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 是布局工具，不是内容排版工具。列宽统一后，文字截断、图片缩放、按钮对齐等细节仍需单独处理，但它们已不再干扰列结构本身。