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:

I advise you to read the documentation of the properties instead of trying your own values. The dev tools can also help you see the accepted values — Temani Afif, Jun 01 '21 at 11:20

score 9 · Accepted Answer · answered Jun 01 '21 at 11:01

9

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>

answered Jun 01 '21 at 11:01

doğukan

23,073
13
57
69

I've tried align-content: start and it worked too. What is the difference? – Liero Jun 01 '21 at 11:02
https://stackoverflow.com/questions/50919447/flexbox-flex-start-self-start-and-start-whats-the-difference – doğukan Jun 01 '21 at 11:03
1

so maybe start would be more appropriate since it is not a flexbox? Otherwise exactly what I needed. Thanks – Liero Jun 01 '21 at 11:07
[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) says "Pack flex items from the end" for `flex-start` but "Pack items from the start" for `start`. – 0stone0 Jun 01 '21 at 11:10
worked like magic Thanks. I was using align-items:flex-start instead of align-content:flex-start but now I realised my mistake – Chidiebere Ezeokwelume Apr 11 '23 at 06:41

score 1 · Answer 2 · answered Jun 01 '21 at 11:04

You can set the grid-auto-rows to the same height as your rows to align them at the top:

grid-auto-rows

The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.

.grid {
  height: 180px;
  display: grid;
  grid-template-columns: 1fr;
  border: solid 1px red;
  
  grid-auto-rows: 20px;
}

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

score 0 · Answer 3 · answered Jun 01 '21 at 10:59

You can achieve this with grid-template-rows which defines dimensions for the rows and prevents them of getting a third of the container height (180px).

Working example:

.grid {
  height: 180px;
  display: grid;
  grid-template-rows: 20px 20px 20px;
  border: solid 1px red;
}

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

Or, you can use `grid-auto-rows: 20px` – doğukan Jun 01 '21 at 11:02 — doğukan, Jun 01 '21 at 11:02

score 0 · Answer 4 · answered Jun 01 '21 at 11:10

Change the grid height to auto .grid{height:auto;}

.grid {
height:auto;
        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;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

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

4 Answers4