Login/Register
Align rows of the css grid (diplay:grid) to the top? [duplicate]
Asked Answered
Solved htmlcsscss-grid
J

4

10

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: enter image description here

Jackstay answered 1/6, 2021 at 10:49 Comment(4)
try adding vertical-align: top to the grid – Seethe
@codingwith3dv: no effect – Jackstay
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 – Mediatize
yeah, that was a mistake – Jackstay
S
16

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>
Surrejoinder answered 1/6, 2021 at 11:1 Comment(5)
I've tried align-content: start and it worked too. What is the difference? – Jackstay
#50919947 – Bueno
so maybe start would be more appropriate since it is not a flexbox? Otherwise exactly what I needed. Thanks – Jackstay
MDN says "Pack flex items from the end" for flex-start but "Pack items from the start" for start. – Creodont
worked like magic😁 Thanks👍. I was using align-items:flex-start instead of align-content:flex-start but now I realised my mistake – Kore
C
1

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>
Creodont answered 1/6, 2021 at 11:4 Comment(0)
D
0

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>
Divers answered 1/6, 2021 at 10:59 Comment(1)
Or, you can use grid-auto-rows: 20px – Bueno
H
0

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>
Humidity answered 1/6, 2021 at 11:10 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.