CSS grid equal row height for rows 2+

Question

I'm trying to set up a table via css grid where the first row is a header and remaining rows are just table data.

<div class="grid">
  <div class="header">header</div>
  <div class="row">a</div>
  <div class="row">b</div>
  <div class="row">c</div>
  <div class="row">d
    <div>row with bigger height</div>
  </div>
</div>

JSbin

I'm trying to get the row height to work correctly with the requirements of:

first row - the header - is auto height
every remaining row (2+) is the same height, ie: 1fr based on max-content
the number of rows is variable, so I can't repeat() with a fixed number of items (like I have below)
the chart height is dynamic (ie: not a fixed height of, say, 500px)

The closest solution I have is:

.grid {
    display: grid;
    grid-template-rows: auto repeat(4, minmax(0, 1fr)); 
}

But I can't do repeat(4) since it needs to be dynamic.

Is this possible to do via css grid, or do I always need to know how many row items exist?

grid-auto-rows should cover all rows not explicitly covered by grid-template-rows, so you can use template rows for the header and auto rows for the others? — NickSlash
– NickSlash, Commented Sep 22 at 14:00
this also sounds more likely like a XY issue. Why create a table via CSS-Grid not an table? Why not use semantic tags such as header and main and make them independent from each other? besides that, if it is just a single column then flexbox would be the better choice. — tacoshy
– tacoshy, Commented Sep 22 at 14:09
It would be a table with the appropriate semantic tags, eg: role="row". Table has some limitations to styling, so need to opt for a div based table. — cat-t
– cat-t, Commented Sep 22 at 16:19

Temani Afif · Accepted Answer · 2025-09-22 14:16:51Z

2

This should do the trick:

.grid {
  display: grid;
  gap: 10px;
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
}

.grid > * {
  border: 1px solid;
}

<div class="grid">
  <div class="header">header</div>
  <div class="row">a</div>
  <div class="row">b</div>
  <div class="row">c</div>
  <div class="row">d
    <div>row with bigger <br>height</div>
  </div>
</div>

answered Sep 22 at 14:16

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cat-t Sep 22 at 16:17

That works! how come does it determine that all rows except the first need to be 1fr?

Temani Afif Sep 22 at 19:00

I am defining only one row in the template (auto)

Collectives™ on Stack Overflow

CSS grid equal row height for rows 2+

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related