How Do I Specify Row Heights In CSS Grid Layout? - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs How do I specify row heights in CSS Grid layout? Ask Question Asked 7 years, 11 months ago Modified 3 months ago Viewed 333k times 119

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.

Note: This is intended for an Electron app only, so browser compatibility is not really a concern.

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>

Which creates the following grid:

When none of the boxes contain any content I would like the grid to look something like this:

• html
• css
• grid-layout
• css-grid

Share Improve this question Follow edited Jun 20, 2018 at 13:14 mikemaccana 123k110110 gold badges424424 silver badges528528 bronze badges asked Jan 29, 2017 at 1:25 ChrisChris 4,05066 gold badges2828 silver badges4343 bronze badges 3

• 4 I should've stated that this is for an Electron app only so browser compatibility is not really a concern. – Chris Commented Jan 29, 2017 at 12:05
• 3 The Electron app I'm building has 1 view which is the grid like above. Since it's a grid I figured it would be fun to play around with the new CSS Grid Layout since it's (kinda) supported in Electron. – Chris Commented Jan 30, 2017 at 14:02
• 3 still new to CSS grid, fr unit is nice but indeed auto was the key to solve my issue as well – Astronaut Commented Aug 18, 2017 at 16:41

Add a comment |

4 Answers 4

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 148

One of the Related posts gave me the (simple) answer.

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); } Share Improve this answer Follow edited May 27 at 11:08 matiaslauriti 8,05644 gold badges3535 silver badges4747 bronze badges answered Jan 29, 2017 at 1:43 ChrisChris 4,05066 gold badges2828 silver badges4343 bronze badges 5

• 2 What is the significance of 10px in the calc() call? – John Karahalis Commented Sep 21, 2019 at 20:03
• 2 @JohnKarahalis to compensate for the 10px grid-gap between the rows. – DannyMeister Commented Nov 19, 2019 at 3:56
• @DannyMeister that doesn't really make sense since the amount of rows is dynamic yet he only subtracts 10px, which is equal to the gap between 2 rows.. 🤔 – kano Commented Feb 15, 2020 at 10:40
• Well I guess not compensation, but probably to make the upper and lower space around the grid be 5px which gives an even 5px (uncollapsed) margin around each row since grid-gap applies only in between elements in the grid. Reducing height by grid-gap or 2*grid-gap to taste seems fairly common in fullscreen applications I've seen. I prefer 2*grid-gap so whitespace around is same as inside. – DannyMeister Commented Feb 16, 2020 at 21:45
• This was actually the solution in my case, too. I had rows, that I wanted to hide (using display: none) and the space wouldn't collapse even with display: noneset on those cells. Turns out I had to make sure to use auto on those particular rows and set the height in the cells themselves. Needless to say it worked exactly the way it was supposed to. Thank you! – Igor Commented Dec 6, 2022 at 1:16

Add a comment | 33

There is also the need to specify the minimum height for the elements, otherwise if they have no content they will disappear.

:root{ --body-margin:10px; } body{ margin:var(--body-margin); } .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 - calc(2 * var(--body-margin))); } .grid div{ min-height:20px; background-color: grey; } .grid div:nth-child(n+5):nth-child(-n+7), div:first-child, div:last-child{ grid-column-start: 1; grid-column-end: -1; } <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

Additional note: grid-column-end: -1 means that the element will expand until the last column.

e.g. if the grid has 10 columns it will expand until the 10th column. This is useful for cases where the column number can change.

Share Improve this answer Follow edited Sep 19 at 19:20 answered Nov 21, 2022 at 12:18 GassGass 9,26855 gold badges4646 silver badges5151 bronze badges 0 Add a comment | 6

Use of repeat with grid

When boxes doesn't contain any content and If you want to get rid of the empty box spaces as well than you can use following.

grid-template-rows: repeat(2, auto) repeat(3, 1fr) repeat(2, auto);

Or more compact syntax as last two cell size will be by default auto if not defined:

grid-template-rows: repeat(2, auto) repeat(3, 1fr);

If you want some space in any case than you can use:

grid-template-rows: repeat(2, 10px) repeat(3, 1fr) repeat(2, 10px);

Finally CSS would be

.grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: repeat(2, auto) repeat(3, 1fr); grid-gap: 10px; height: calc(100vh - 10px); } Share Improve this answer Follow answered Jan 5, 2022 at 12:44 LearningIsNever EndingProcessLearningIsNever EndingProcess 24144 silver badges55 bronze badges Add a comment | 2 .periodic-table { display: grid; grid-template-columns: repeat(18, 60px); grid-template-rows: repeat(7, 70px) 40px repeat(2, 70px); grid-gap: 2px; }

This code will create 18 columns each of them are 60px, and 7 rows of 70px 8th row will be 40px then again 9th and 10th row will be 70px.

Share Improve this answer Follow answered Feb 20, 2022 at 9:18 Tawhid MonowarTawhid Monowar 15211 silver badge77 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css
• grid-layout
• css-grid

or ask your own question.

• The Overflow Blog
• The ghost jobs haunting your career search
• Breaking up is hard to do: Chunking in RAG applications
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Visit chat

Linked

0 CSS Grid Layout: Three rows grid 0 3x3 grid should not be so difficult 0 Accommodate overflown content in 100vh (CSS Grid) 0 How to align left and right div element inside a Two Column Layout? 0 Make all items of same height and vertically centered with CSS grid

Related

2 Flexible grid row heights in CSS Grid 19 Set a height value on an individual CSS Grid row 31 Set row height to fit content height in CSS Grid 1 css grid layout - height of rows never works 13 Make CSS Grid row height flexible 3 Set height of first row in CSS grid 0 set css grid layout equal height rows 1 How to set custom height of one row in grid? 2 How can I set the height of a row dynamically with grid? 0 css grid fit rows heights

Hot Network Questions

• Why does South Korea's presidential impeachment process involve the judiciary?
• What color is antimatter?
• Milky way from planet Earth
• Why are Mormons and Jehovah's Witnesses considered Christian, but Muslims are not, when they believe the same regarding Jesus, the Trinity, and Bible?
• Why is the Democracy Space Station unavailable?
• Middle of Nowhere
• What is the purpose of the philosophy of science?
• What (if any) proof need a traveler have with them with the UK ETA
• Ubuntu reboot log question
• Where in the world does GPS time proceed at one second per second? Is there a map?
• How to know the expected result in Test Driven Development when using Constrained Non-Determinism without duplicating Logic
• Rules of thumb for when to strive for perfection vs. good enough in practice
• Group labels in BoxWhiskerChart
• Why are my giant carnivorous plants so aggressive towards escaped prey?
• Why is the position of the minus sign inside the tikz node shifted upwards when using the unicode-math package?
• What is the angle?
• Journal requires co-authors to register with ORCID, but if I don’t want to – what are my options?
• Does enabling FILESTREAM for file I/O access improve performance and manageability in handling file data?
• Can President sign a bill passed by one Congress once a new Congress has been sworn in if the bill is delayed being presented to him (there’s a lag)?
• 2 Rosh Hashonos on Tuesday in a row
• Why would a brief power-down NOT constitute a reboot?
• Which is the default butter in the US?
• The global wine drought that never was (title of news text that seems like truncated at first sight)
• Definite Integral doesn't return results

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html