CSS Grid通过可用空间动态更改行数和列数[重复]答案

【问题标题】：CSS Grid dynamiclly change the amout of rows and columns by the available space [duplicate]CSS Grid通过可用空间动态更改行数和列数[重复]
【发布时间】：2022-01-28 16:49:31
【问题描述】：

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

如果右侧有空间容纳其他项目，则创建一个新列并将其添加到那里
如果不是这种情况，请在下面创建一个新行并将项目添加到该行的第一列中

我知道每件商品的尺寸，并且所有商品的尺寸都相同。目前，我动态定义了列大小，但如果需要，可以将它们全部设为相同（静态）大小。

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

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

如何让 CSS 动态确定所需的列数和行数？我知道每个项目的大小，所以我认为这应该没有问题

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

【问题讨论】：

grid-template-columns: repeat(auto-fit, minmax(360px, 460px))?
使用 grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); 为我工作，感谢您指引我正确的方向

标签： html css css-grid

【解决方案1】：

我认为 CSS Flexbox 会更适合你的情况；如果当前行上没有空间可以添加元素，您可以将网格映像为单向容器，其中包含在下一行换行的元素。

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

【讨论】：