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

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

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

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

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

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

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

这是我一直在尝试的方法,但它目前无法正常工作,因为它只呈现单个列(CSS 在 JS 中,但它只是 CSS):

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

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

期望的结果

这是我的实现:

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>

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

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