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 in CSS by Edureka
• 11,040 points
171 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 by Tanishqa
• 700 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 in CSS by Edureka
• 9,540 points
36 views
0 votes
0 answers

How do I rotate text in css?

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

Jun 30 in CSS by Edureka
• 11,040 points
68 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 in CSS by Edureka
• 11,040 points
56 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 in CSS by Edureka
• 11,040 points
11 views
0 votes
0 answers

How to display image in css grid?

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

Jul 18 in CSS by Edureka
• 11,040 points
51 views
0 votes
1 answer

CSS-only masonry layout

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

answered Aug 8 in CSS by Tanishqa
• 700 points
39 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
5,015 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
1,730 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 in CSS by Tanishqa
• 700 points
36 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 in CSS by Tanishqa
• 700 points
46 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP