CSS 具有固定列大小的网格，可以添加额外的列来填充容器的宽度

Question

我有一个宽度和结果数量各不相同的网格。

网格中的每个单元格都是 200x200 像素。

随着网格的扩展，我希望列宽保持固定并添加新列。您可以想象网格最初有 3 列，当用户扩展 window 时，一个添加第四列以使用新的 whitespace.

此网格正在呈现一组搜索结果。

所以我需要能够根据结果数改变行数。
我需要能够让列动态地填满水平 space。
我需要结果在移动到下一行之前先填满每一行。

这是我一直在尝试的方法，但它目前无法正常工作，因为它只呈现单个列（CSS 在 JS 中，但它只是 CSS）：

  ResultsGrid: {
    display: grid,
    gridAutoRows: 280px,
    gridAutoColumns: 280px,
    gap: 20px,
    gridAutoFlow: row-dense,
  }

  Result: {
    border: 1px solid #EAEAEA,
  }

期望的结果

Answer 1

这是我的实现：

auto-fit参数与repeatCSS函数

.grid-item {
  border: 2px solid red;
  background: orange;
  color: red;
  padding: 10px;
  border-radius: 8px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-auto-rows: 200px;
  gap: 6px;
}

<div class="wrapper">
  <div class="grid-item">html</div>
  <div class="grid-item">html</div>
  <div class="grid-item">html</div>
  <div class="grid-item">html</div>
  <div class="grid-item">html</div>
  <div class="grid-item">html</div>
</div>

Answer 2

我之前遇到过同样的问题，这是你需要的：

ResultsGrid {
  display: grid;
  gridTemplateColumns: repeat(auto-fill, 200px);
  gridAutoRows: 10rem;
  gap: 20px;
}

CSS 具有固定列大小的网格，可以添加额外的列来填充容器的宽度

CSS grid with fixed column size that adds extra columns to fill width of container

css

css-grid