如何简便定义CSS Grid大量等宽列而无需重复输入1fr？

你可以用CSS Grid内置的repeat()函数实现批量重复的轨道配置，无需手动逐个输入1fr。

实现100个等宽列的完整代码如下：

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

简单说明 #

• repeat()是CSS Grid规范专门提供的重复语法，用来简化多轨道的配置代码
• 第一个参数为重复次数，这里填100即生成100条列轨道
• 第二个参数为轨道尺寸，这里填1fr即每列宽度按比例均分容器剩余空间，和你手动写100次1fr的效果完全一致
• 额外补充：如果你需要的是自适应列数、不需要固定100列的场景，还可以把第一个参数换成auto-fill或者auto-fit关键字，实现容器宽度变化时自动增减列数的响应式效果。

内容的提问来源于stack exchange，提问作者youngprogrammer1997