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,806 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
508 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
570 views
0 votes
0 answers

How do I create a 3x3 grid via CSS?

Given 9 divs one after another, I want ...READ MORE

Aug 12, 2022 in CSS by Edureka
• 13,620 points
873 views
0 votes
0 answers

How do I center a list of text and then justify it in a w3.css column?

I am unable to center the contact ...READ MORE

Aug 17, 2022 in CSS by Edureka
• 13,620 points
526 views
0 votes
0 answers

How to display image in css grid?

I am trying to make a css ...READ MORE

Jul 18, 2022 in CSS by Edureka
• 13,620 points
1,339 views
0 votes
1 answer

CSS-only masonry layout

A masonry feature is included in CSS ...READ MORE

answered Aug 8, 2022 in CSS by Tanishqa
• 1,170 points
1,105 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
10,019 views
0 votes
1 answer

Using/Handling colon inside a JSF generated HTML element ID in CSS selector

Yes, you can.  Just Backslash (\) the colon.  Like ...READ MORE

answered Nov 14, 2018 in Others by DataKing99
• 8,240 points
2,665 views
0 votes
1 answer

What is the meaning of "cascading' in CSS??

Cascading simply implies that it may be ...READ MORE

answered Aug 3, 2022 in CSS by Tanishqa
• 1,170 points
683 views
0 votes
1 answer

Adding style to file upload button in css

The best approach would be to tie ...READ MORE

answered Aug 3, 2022 in CSS by Tanishqa
• 1,170 points
756 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP