<p>我有一个网格容器，我希望我的项目放在底部。</p> <p>我有这个实际的</p> <p>我想要这样的 期望</p> <p> <pre class="brush:css;toolbar:false;">.container { display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(6, 1fr); grid-gap: 8px; width: 200px; background: blue; } .item { background-color: red; color: white; } .item-1 { grid-column: span 5; grid-row: span 6; } .item-2 { grid-column: span 4; grid-row: span 5; } .item-3 { grid-column: span 3; grid-row: span 4; }</pre> <pre class="brush:html;toolbar:false;">&lt;div class="container"&gt; &lt;div class="item item-1"&gt;项目 1&lt;/div&gt; &lt;div class="item item-2"&gt;项目 2&lt;/div&gt; &lt;div class="item item-3"&gt;项目 3&lt;/div&gt; &lt;/div&gt;</pre> </p> <p>PS：我已经尝试了place-items: end;和align-items: end;</p>

.container {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  width: 200px;
  background: blue;
}
.item {
  background-color: red;
  color: white;
}
.item-1 {
  grid-column: span 5;
  grid-row: span 6;
}
.item-2 {
  grid-column: 6 / span 4;
  grid-row: 2 / span 5;
}
.item-3 {
  grid-column: 10 / span 3;
  grid-row: 3 / span 4;
}

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>