html - 自下而上而不是自上而下填充 CSS 网格

Question

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

这是我到目前为止所拥有的：

.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>

标签： htmlcssflexboxcss-selectorscss-grid

Answer 1

使用弹性盒：

.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>