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
• 9,940 points
23 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
28 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
• 9,940 points
21 views
0 votes
0 answers

How do I create a 3x3 grid via CSS?

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

4 days ago in CSS by Edureka
• 9,940 points
10 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
37 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
• 9,940 points
7 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
12 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
4,749 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,703 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
14 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
20 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