将 css 网格 (diplay:grid) 的行与顶部对齐？

Question

我有一个 css 网格（display:grid）和具有固定高度的行。

我可以将行对齐到网格顶部而不是垂直分布吗？

.grid {
  height: 180px;
  display: grid;
  grid-template-columns: 1fr;
  border: solid 1px red;
  align-content: top;
  align-items: top;
}

.row {
  grid-column: 1 / -1;
  height: 20px;
  background: silver;
  border: dashed 1px blue;
}

<div class="grid">
  <div class="row">row 1</div>
  <div class="row">row 2</div>
  <div class="row">row 3</div>
</div>

我想实现这个目标：

Answer 1

只需添加align-content: flex-start

.grid {
  height: 180px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: flex-start;
  border: solid 1px red;
}

.row {
  grid-column: 1 / -1;
  height: 20px;
  background: silver;
  border: dashed 1px blue;
}

<div class="grid">
  <div class="row">row 1</div>
  <div class="row">row 2</div>
  <div class="row">row 3</div>
</div>