How can I achieve responsive height with CSS-Grid?
Question
So I'm just getting started with CSS-grid having used Bootstrap up until now (late to the party I know, but hey, I'm here now!) and I've been running into some trouble with grid-row heights.
The Goal:
To responsively set the height of the grid as a whole to 100% viewport height.
The Problem:
Within my grid I'm making use of the grid-gap property. These small additions to the height of the grid are throwing my vh units out so that the bottom of the grid is no longer responsively hitting the bottom of the viewport.
What I've tried (and what hasn't worked...):
Using vh - as I've said, this isn't working because (as far as I can tell) the grid-gap is causing additional height to be added to the content so that despite my vh calculations all coming together to equal 100vh, the content in fact runs off the bottom of the viewport.
Using fr units to set grid-row height - I'm also just getting to grips with this new(ish) unit but when I tried it here it seems to be taking its fraction calculations from the sum of content not the viewport height; so therefore the content was all far too short, leaving a large gap between the bottom of the content and the bottom of the viewport.
Setting a min- and/or max-height to the grid-container - this seems to just clash with the explicit settings for the row heights so returned no change to what I was seeing on screen at all.
This is all so so simple when dealing with width, but once again height comes back to bite my ass. Does anyone have any suggestions?
<body>
<main><!-- Grid Container -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</main>
</body>
* {
margin: 0;
padding: 0;
}
main {
display: grid;
grid-template-rows: 10vh repeat(4, 20vh) 10vh;
grid-gap: 5px;
}
2 answers
solution1
2 ACCPTED 2018-07-01 12:35:05
From your declaration: grid-template-rows: 10vh repeat(4, 20vh) 10vh; - it looks like you want 6 rows with the four middle rows twice as high as the first and last row. So:
1) Change grid-template-rows: 10vh repeat(4, 20vh) 10vh; to
grid-template-rows: 1fr repeat(4,2fr) 1fr;
2) add a height to the grid: height: 100vh;
* { margin: 0; padding: 0; } main { display: grid; grid-template-rows: 1fr repeat(4,2fr) 1fr; grid-gap: 5px; height: 100vh; grid-gap: 5px; }
<main><!-- Grid Container --> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </main>
solution2
1 2018-07-01 12:36:28
You are close, mentioning both FR & VH - however, I am not sure you used them together.
Here is a link to a working codepen. The changes I made were changing grid-template-rows to use fr, and then adding a height of 100vh to your grid container.
grid-template-rows: 1fr repeat(4, 2fr) 1fr;
height: 100vh;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.