社区首页 >问答首页 >CSS网格动态地根据可用空间更改行和列的内容

问CSS网格动态地根据可用空间更改行和列的内容
EN

Stack Overflow用户

提问于 2022-01-27 05:42:35

回答 1查看 239关注 0票数 1

我有一个网格，其中包含需要在网格中显示的动态项目数量。到目前为止还很正常。现在，我希望网格自动定位网格中的所有项目。我的意思是：

中创建一个新行并添加该项。

我知道每个项目的大小，而且所有的项目都有相同的大小。目前，我动态地定义了列大小，但是如果需要的话，可以让它们都是相同的(静态)大小。

.grid {
    display: grid;
    grid-auto-columns: minmax(360px, 460px);
    grid-auto-rows: 240px;
}

我尝试使用grid-auto-flow: column;，但这使项目溢出到屏幕之外，而不是将它们移到新行中。

如何使CSS动态地确定所需的列和行数？我知道每个项目的大小，所以在我看来，这是没有问题的。

我不想做的是使用@media规则，因为我需要为从300 to宽度到16k显示的显示定义大约50个规则。我也不想为此使用JavaScript，因为这不是一个很好的解决方案。

发布于 2022-01-27 06:24:15

我认为case将更适合您的情况；如果在当前行中没有添加元素的空间，您可以将您的网格想象成一个单向容器，其中的元素可以包装在下一行。

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70879559

复制

相似问题

问CSS网格动态地根据可用空间更改行和列的内容EN