自下而上而不是自上而下填充 CSS 网格答案

【问题标题】：Filling a CSS Grid from bottom up instead of top down自下而上而不是自上而下填充 CSS 网格
【发布时间】：2021-10-30 09:14:47
【问题描述】：

我需要一种方法让我的 CSS Grid 中的元素向上堆叠而不是自上而下。

这是我目前所拥有的：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 306px;
  border: 1px solid black;
}

.gridItem {
  width: 100px;
  height: 100px;
  border: 1px solid orange;
}

<div class="grid">
  <div class="gridItem">1</div>
  <div class="gridItem">2</div>
  <div class="gridItem">3</div>
  <div class="gridItem">4</div>
  <div class="gridItem">5</div>
  <div class="gridItem">6</div>
  <div class="gridItem">7</div>
</div>

【问题讨论】：

不确定是否可行，不能使用回流。 CSS 算法是根据无限长页面的概念设计的，因此布局从顶部开始，向下进行。
提前知道什么？例如，元素的数量是否已知？

标签： html css flexbox css-selectors css-grid

【解决方案1】：

如果您知道 div 的确切数量，您可以尝试使用网格区域：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 306px;
  border: 1px solid black;
}

.gridItem {
  width: 100px;
  height: 100px;
  border: 1px solid orange;
}
.div1 { grid-area: 3 / 1 / 4 / 2; }
.div2 { grid-area: 3 / 2 / 4 / 3; }
.div3 { grid-area: 3 / 3 / 4 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 4; }
.div7 { grid-area: 1 / 1 / 2 / 2; }

<div class="grid">
  <div class="gridItem div1">1</div>
  <div class="gridItem div2">2</div>
  <div class="gridItem div3">3</div>
  <div class="gridItem div4">4</div>
  <div class="gridItem div5">5</div>
  <div class="gridItem div6">6</div>
  <div class="gridItem div7">7</div>
</div>

【讨论】：

【解决方案2】：

使用弹性框：

.grid {
  display: flex;
  flex-flow: wrap-reverse; /* this will do the magic */
  width: 300px;
  border: 1px solid black;
  box-sizing:border-box;
}

.gridItem {
  width:calc(100%/3);
  height: 100px;
  box-sizing:border-box;
  border: 1px solid orange;
}

<div class="grid">
  <div class="gridItem">1</div>
  <div class="gridItem">2</div>
  <div class="gridItem">3</div>
  <div class="gridItem">4</div>
  <div class="gridItem">5</div>
  <div class="gridItem">6</div>
  <div class="gridItem">7</div>
</div>

【讨论】：