我可以制作一个动态行数或列数的CSS网格吗？

2izufjch 于 2022-12-05 发布在其他

关注(0)|答案(7)|浏览(152)

我想做的是创建一个具有动态单元格数的CSS grid。为了简单起见，让我们假设每行总是有四个单元格。我可以指定一个具有这种动态行数的网格吗？
为了使它更简单，下面是Flexbox实现：
第一个

**P.S.**显然，我第一次不够清楚......我想使用最新的CSS Grid Layout.重新创建此效果

css

来源：https://stackoverflow.com/questions/43115822/can-i-make-a-css-grid-with-dynamic-number-of-rows-or-columns

7条答案

按热度按时间

4uqofj5v1#

好的，在阅读了MDN reference,之后，我找到了答案！动态行（或列）的关键是repeat属性。
第一个

**P.S.**或者您可以在我的特定示例中使用grid-auto-rows。

赞(0）回复(0）举报 2022-12-05

kx1ctssn2#

只需使用下面的代码自动生成网格列

.container {
  display: grid;
  grid-auto-flow: column;
}

赞(0）回复(0）举报 2022-12-05

kse8i1jr3#

对于那些希望获得一种动态表的人来说，一个很好的解决方案是使用flex，将flex-wrap和flex: 1用于所有元素：

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.container .item {
  flex: 1;
}

赞(0）回复(0）举报 2022-12-05

68de4m5k4#

像这样的东西？
第一个

赞(0）回复(0）举报 2022-12-05

zwghvu4y5#

你不需要使用repeat，相反，你可以从javascript代码中设置一个变量--grid-template-columns。
rootEl.style.setProperty('--grid-template-columns' theGridTemplateColumnsValue)
theGridTemplateColumnsValue是一个字符串，它还可以包含其他css变量。这样，您可以动态地设置每行的列数。

赞(0）回复(0）举报 2022-12-05

w3nuxt5m6#

下面是一个非常简单的网格中动态列的示例
第一个

赞(0）回复(0）举报 2022-12-05

pobjuy327#

我来寻找的是如何让浏览器在保持行拉伸的同时计算出适当的列数。我在mdn文档中找到了答案。
重要的是设置一个列的最小宽度。在我的例子中我使用了200px。
第一个

赞(0）回复(0）举报 2022-12-05