当项目首先下降到左列时创建动态 CSS 网格

Question

我正在尝试设计一种 CSS 样式，其中有两列，并且项目首先从左列向下流动，然后再从右列顶部开始。我可以让它适用于一定数量的项目，但是当我尝试将其应用于可以添加和删除项目的动态列表时，我要么最终得到不平衡的网格，要么数据从左到右流动。本质上我有“A”、“B”、“C”等的项目，我希望它看起来像这样：

| A | F |
| B | G |
| C | H |
| D | I |
| E | 

但是，当我尝试各种方法使其动态化时，它往往会破坏所有列或项目流动如下：

| A | B |
| C | D |
| E | F |
| G | H |
| I | 

这是我不想要的。

这是我一直在使用的代码示例，如果有人有建议来创建我上面需要的结果。

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(15, 1fr);
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
  <div class="grid-item">E</div>
  <div class="grid-item">F</div>
  <div class="grid-item">G</div>
  <div class="grid-item">H</div>
  <div class="grid-item">I</div>
  <div class="grid-item">J</div>
  <div class="grid-item">K</div>
  <div class="grid-item">L</div>
  <div class="grid-item">M</div>
  <div class="grid-item">N</div>
  <div class="grid-item">O</div>
  <div class="grid-item">P</div>
  <div class="grid-item">Q</div>
  <div class="grid-item">R</div>
  <div class="grid-item">S</div>
</div>

谢谢你。

Answer 1

检查网格自动流 https://www.w3schools.com/cssref/playdemo.php?filename=playcss_grid-auto-flow

.grid-container {
  display: grid;
  grid-auto-flow: column; /* Items flow down the first column, then the next */
  grid-template-rows: repeat(auto-fit, minmax(0, 1fr)); /* Adjusts rows dynamically */
  grid-template-columns: repeat(2, 1fr); /* Defines 2 equal columns */
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}