grid-template-columns

1. 属性介绍与特点

该属性用于定义网格中列的宽度配置。常见属性值及其特点如下：

• px / rem (绝对单位)

  • 特点：固定死板。宽度不随屏幕变化，适用于侧边栏或固定宽度的布局。

• fr (弹性单位)

  • 特点：灵活自适应。代表“剩余空间的一份”。1fr 会自动填满剩余空间，2fr 是 1fr 的两倍宽。

• auto (自动)

  • 特点：内容决定宽度。列宽由内容撑开，或者自动占据剩余空间。

• repeat(数量, 宽度) (重复函数)

  • 特点：简洁高效。避免重复书写代码。例如 repeat(3, 1fr) 等同于 1fr 1fr 1fr。

• auto-fill / auto-fit (智能填充)

  • 特点：响应式魔法。不指定具体列数，浏览器根据容器宽度自动计算能放下多少列。

• minmax(最小值, 最大值) (范围限制)

  • 特点：安全保底。保证列宽不小于最小值，空间充足时可拉伸至最大值。

2. 举例说明

场景 A：固定侧边栏 + 内容自适应
左侧导航固定 200px，右侧内容占满剩余空间。

grid-template-columns: 200px 1fr;

场景 B：三列等宽布局
三列宽度完全相等，自动平分容器。

grid-template-columns: repeat(3, 1fr);

场景 C：无需媒体查询的自动响应式（最推荐）
每列最小 300px，空间够大则自动拉伸，能放几列放几列。

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

grid-template-columns: repeat(auto-fill, 300px); 

3. 使用建议
4. 能用 fr 别用 %：fr 单位会自动减去 gap（间距）后计算宽度，而百分比往往需要复杂的 calc() 计算，否则容易导致布局溢出。
5. 响应式布局首选 minmax：在做卡片列表时，配合 auto-fill 使用 minmax(固定宽, 1fr)，可以实现完美的“手机端单列、桌面端多列”效果，无需写任何 @media 代码。
6. 注意 auto 的不可控性：尽量避免在大布局中直接使用 auto，因为它很容易被长文本撑得非常宽，破坏布局结构。