How do I specify row heights in CSS Grid layout

0 votes

I have a CSS Grid Layout in which I want to make some (middle 3) rows stretch to their maximum size. I'm probably looking for a property similar to what flex-grow: 1 does with Flexbox but I can't seem to find a solution.

I have the following CSS Grid Layout:

.grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-gap: 10px;
  height: calc(100vh - 10px);
}

.grid .box {
  background-color: grey;
}

.grid .box:first-child,
.grid .box:last-child {
  grid-column-start: 1;
  grid-column-end: -1;
}

/* These rows should 'grow' to the max height available. */
.grid .box:nth-child(n+5):nth-child(-n+7) {
  grid-column-start: 1;
  grid-column-end: -1;
}
<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

None of the boxes containing any content even like this:

Current Grid

Aug 3, 2022 in CSS by Edureka
• 13,620 points
6,843 views

1 answer to this question.

0 votes

Apparently, the auto value on the grid-template-rows property does exactly what I was looking for.

.grid {
    display:grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
    grid-gap:10px;
    height: calc(100vh - 10px);
}
answered Aug 4, 2022 by Tanishqa
• 1,170 points

Related Questions In CSS

0 votes
1 answer

How do I center this form in css?

You can try form { ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
510 views
0 votes
0 answers

How do I rotate text in css?

How can I rotate text using CSS ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
574 views