Css网格重复语法

我必须使用css网格渲染一行，这样，第一列必须具有灵活的长度，而所有其他列必须具有固定的宽度。大致如下

grid-template-columns: 1fr repeat(10, 100px)

---

上述方法不起作用。如何才能做到这一点？

您可以使用

自动调整

。它将使柱适合当前可用空间

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

---

您可以使用

auto-fit

。它将使柱适合当前可用空间

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

---

使用

网格模板列：最大内容重复（4100px）


.grid{
显示：网格；
网格模板列：最大内容重复（4100px）；
}
.项目{
边框：1px纯红；
}

Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit，amet…更多
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
使用
网格模板列：最大内容重复（4100px）


.grid{
显示：网格；
网格模板列：最大内容重复（4100px）；
}
.项目{
边框：1px纯红；
}

Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit，amet…更多
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。

1fr
2.
3.
4.
5.
6.
7.
8.
9
10
11
.集装箱{
显示：网格；
网格模板列：1fr重复（10100px）；
栅柱间隙：20px；
}
.container>div{
背景颜色：棕色；
颜色：白色；
文本对齐：居中
}

1fr
2.
3.
4.
5.
6.
7.
8.
9
10
11
.集装箱{
显示：网格；
网格模板列：1fr重复（10100px）；
栅柱间隙：20px；
}
.container>div{
背景颜色：棕色；
颜色：白色；
文本对齐：居中
}
为什么不为此使用flex？使用flex太简单了，
flex:1
放在第一项上，固定宽度放在重新关联的（可能是重复的）上，为什么不使用flex呢？使用flex太简单了，在第一个项目上使用
flex:1
，在重新关联的项目上使用固定宽度（可能是重复的）