Html 如何创建包含3列和无限数量项的CSS网格

我试图创建一个css网格，它将有3列，我可以在其中添加任意数量的具有相同高度的“content div”，它们将按顺序添加，如下所示：

[1][2][3]
[4][5][6]
[7][8]

---

任何帮助都将不胜感激：）

通过使用

网格模板列：在网格容器上重复（3，1fr）

您将获得3列等宽的布局，默认情况下，网格布局将使每行中的所有项目高度相等。

let n=$（'.grid.item'）.last（）.text（）；
$（'.grid'）。单击（函数（）{
常量项=$（“”）
常量文本=（n%7！=0？''：“Lorem ipsum door sit amet，concetetur adipising elit.Excepturi，corporis.”
item.text（++n+text）
$（此）.append（项目）
})

.grid{
显示：网格；
网格模板列：重复（3，1fr）；
栅隙：10px；
}
.项目{
边框：1px纯黑；
}

1洛雷姆·伊普苏姆·多洛·希特·阿梅特，为精英献身。除了身体。
2.

网格布局必须有一个显示属性设置为“网格”或“内联网格”的父元素

网格容器的直接子元素自动成为网格项

试试下面

.网格容器{
显示：网格；
网格模板列：自动；
背景色：#2196F3；
填充：10px；
}
.表格项目{
背景色：rgba（255、255、255、0.8）；
边框：1px实心rgba（0,0,0,0.8）；
填充：20px；
字体大小：30px；
文本对齐：居中；
}
网格元素
1.
2.
3.
4.
5.
6.
7.
8.
9

给你：

.container{
    display: flex;
    flex-wrap: wrap;
    padding: 0 2px;
    margin: 0 16px 16px 16px;
}

.cell{
    padding: 10px;
    width: 33.333%;
    word-wrap: break-word;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

---

你在做一个小搜索时什么也没发现？所以不是编码服务。。。我也不明白为什么会有人投票。。