Align rows of the css grid (diplay:grid) to the top?

Question

I have a css grid (display:grid) and rows with fixed height as well.

Can I align the rows to the top of the grid instead of distributing them vertically?

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

I want to achieve this:

Answer 1

Just add 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>