This question already has answers here:
Responsive grid of hexagons
(10 answers)
Closed 12 months ago.
I have multiple hexagons in a grid. I'm trying to have the grid items (hexagons) height and width responsive to the layout. Like as you can see in the jsfiddle they are overflowing from the grid container. Is there any way I could make the height and width fix relative to its container like whatever the layout is, they remain the same?
https://jsfiddle.net/gv5wc12x/3/
.home {
width: 100%;
height: 100vh;
background-color: rgb(123, 158, 158);
}
.hex-container {
max-width: 1000px;
margin: 0px auto;
margin-bottom: 100px;
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: 205px;
grid-gap: 2px;
filter: drop-shadow(0px 0px 8px rgba(247, 247, 247, 0.9));
}
.hexagon {
z-index: 0;
display: flex;
width: 250px;
height: 270px;
position: relative;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hexagon:first-child {
grid-row-start: 1;
grid-column: 2 / span 2;
background-color: #003366;
}
.hexagon:nth-child(2) {
grid-row-start: 1;
grid-column: 4 / span 2;
background-color: #87cefa;
}
.hexagon:nth-child(3) {
grid-row-start: 1;
grid-column: 6 / span 2;
background-color: #f5f5f5;
}
.hexagon:nth-child(4) {
grid-row-start: 2;
grid-column: 3 / span 2;
background-color: #f5f5f5;
}
.hexagon:nth-child(5) {
grid-row-start: 2;
grid-column: 5 / span 2;
background-color: #003366;
}
<div class="home">
<div class="hex-container">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
</div>
Please any help would be appreciated.
You were losing responsiveness because of fixed height and width values. Instead, I chose max and min height or widths to define the values. I also set aspect-ratio on the hex-container and the hexagons so they maintain the ideal dimensions you want.
Also, changed you rows to be grid-template-rows: repeat(2, auto); in order to give them resonsiveness.
In order to make that work, I added a top value on the second row hexagons of -25% (matching the point in the clip path) so they sit next to the top row of hexagons.
This will be responsive to widths and heights of all kinds.
.home {
width: 100%;
min-height: 100vh;
background-color: rgb(123, 158, 158);
}
.hex-container {
height: 100%;
max-height: 100vh;
max-width: 100%;
aspect-ratio: 6 / 2;
display: grid;
grid-template-columns: repeat(6, auto);
grid-template-rows: repeat(2, auto);
grid-gap: 2px;
filter: drop-shadow(0px 0px 8px rgba(247,247,247,0.9));
}
.hexagon {
z-index: 0;
max-width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
background: #151515;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hexagon:first-child {
grid-row-start: 1;
grid-column: 1 / span 2;
background-color: #003366;
color: #fff;
filter: drop-shadow(0px 0px 8px rgba(247,247,247,0.9));
}
.hexagon:nth-child(2) {
grid-row-start: 1;
grid-column: 3 / span 2;
background-color: #87cefa;
color: #fff;
}
.hexagon:nth-child(3) {
grid-row-start: 1;
grid-column: 5 / span 2;
background-color: #f5f5f5;
color: #003366
}
.hexagon:nth-child(4) {
grid-row-start: 2;
grid-column: 2 / span 2;
background-color: #f5f5f5;
color: #003366;
position: relative;
top: -25%;
}
.hexagon:nth-child(5) {
grid-row-start: 2;
grid-column: 4 / span 2;
background-color: #003366;
color: #fff;
position: relative;
top: -25%;
}
<div class="home">
<div class="hex-container">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
</div>
Related
I have 3 divs in 3 columns of a grid and I want the middle div to stay static when zoomed in. The one on the right and left growing with the zoom
HTML
<mdiv class="dvCenter">
<div class="dvCenter1"></div>
<div class="dvCenter2"></div>
<div class="dvCenter3"></div>
</div>
CSS
.dvCenter{
background-color: black;
height: 110px;
align-items: center;
display: grid;
grid-template-columns: 40% 20% 40%;
grid-template-rows: 100%;
}
.dvCenter1{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 1;
}
.dvCenter2{
background-color: brown;
height: 100%;
grid-row: 1;
grid-column: 2;
}
.dvCenter3{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 3;
}
I think what you want is to have the page start by having the .dvCenter2 div to have 20% width and then stays as the current width when the page grows. But % is a relative unit and when the screen grows bigger, the 20% is also bigger than the original 20%.
I can't think of a pure CSS way to do this but you can use javascript to query the current size of the container and modify the grid-template-column. Check the demo below. Hope this helps!
$(".dvCenter").css("grid-template-columns", "1fr " + $(".dvCenter2").width() + "px 1fr");
$("#btn").click(function() {
$(".dvCenter").toggleClass("enlarge");
});
.dvCenter{
background-color: black;
height: 110px;
width: 50%;
align-items: center;
display: grid;
grid-template-columns: 1fr 20% 1fr;
grid-template-rows: 100%;
}
.dvCenter1{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 1;
}
.dvCenter2{
background-color: brown;
height: 100%;
grid-row: 1;
grid-column: 2;
}
.dvCenter3{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 3;
}
.enlarge {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<mdiv class="dvCenter">
<div class="dvCenter1"></div>
<div class="dvCenter2"></div>
<div class="dvCenter3"></div>
</div>
<button id="btn">Click to resize container</button>
I am trying to create a grid using css. The first element has a fixed height which is causing the whole first row to have the same height. I want the elements in the second row to push up and fill the empty space in the first row. Is there anyway of achieving this with css grid?
The page I'm intending to using this for will have elements that will change in size depending on what the user submits.
I've tried using grid-auto-columns and grid-auto-rows along with grid-auto-flow: dense; but i can't get any combination of these to get the desired result. Any advice appreciated.
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
height: 250px;
}
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
</div>
Here is the codepen I am practicing on:
codepen
This is as simple as adding:
.primary {
grid-row: span 2;
}
Though obviously I chose to add a CSS class to the element you want to have focus, in order to do so:
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
height: 250px;
}
.primary {
/* this causes the .primary element(s) to expand across
two of the grid-row tracks: */
grid-row: span 2;
}
<div class="container">
<div class="item item1 primary"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
</div>
JS Fiddle demo.
The above could, of course, be achieved without adding a class-name and simply specifying an :nth-child() element:
/* or .container > div:first-child: */
.container > div:nth-child(1) {
grid-row: span 2;
}
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
height: 250px;
}
/* or .container > div:first-child: */
.container > div:nth-child(1) {
grid-row: span 2;
}
<div class="container">
<div class="item item1 primary"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
</div>
JS Fiddle demo.
References:
grid-row.
first thing you can't with only 2 rows. Grid gives a structure.
with 3 rows, it's possible
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
height: 250px;
grid-area: 1 / 1 / 3 / 2;
}
.item2 {
grid-area: 3 / 1 / 4 / 2;
}
.item3 {
grid-area: 1 / 2 / 2 / 3;
}
.item4 {
grid-area: 1 / 3 / 2 / 4;
}
.item5 {
height: 250px;
grid-area: 2 / 2 / 4 / 3;
}
.item6 {
height: 250px;
grid-area: 2 / 3 / 4 / 4;
}
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
<div class="item item6"></div>
</div>
This is one way to do it with grid-area position for each item
It's also possible to do same with span
Another manner to solve this issue...
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
box-sizing:border-box;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
height: 250px;
}
.item4 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.item5 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
<div class="container">
<div class="item item1">item 1</div>
<div class="item item2">item 2</div>
<div class="item item3">item 3</div>
<div class="item item4">item 4</div>
<div class="item item5">item 5</div>
</div>
I tried stopping the column overflow with max-height, max-width, but it doesn't seem to work.
I've made three columns with CSS Grid. One for the nav section, one for the left column and one for the right column. the left column section keeps overflowing over the nav section and the right column section as shown in the screenshots.
What I'm trying to achieve:
What happens:
#import url("https://fonts.googleapis.com/css2?family=Asap:wght#400;700&display=swap");
* {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #4a6163;
font-family: "Asap";
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.main_grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 0.25fr (1fr)[2];
grid-template-columns: 0.25fr repeat(2, 1fr);
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
max-height: 100%;
max-width: 100%;
}
.nav_section {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-area: 1 / 1 / 1 / 2;
border: 3px yellow solid;
}
.left_column {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-area: 1 / 2 / 1 / 3;
border: 1px yellow solid;
}
.right_colomn {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-area: 1 / 3 / 1 / 4;
border: 2px blue solid;
}
.left_column > h1 {
font-family: "Asap";
color: #f9faf4;
font-size: 13rem;
font-style: normal;
font-weight: normal;
line-height: 15.75rem;
text-transform: uppercase;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: red 3px solid;
-o-object-fit: contain;
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
.main_bio {
color: #f2c4ce;
font-size: 1.75rem;
text-decoration: underline;
}
<main>
<div class="main_grid">
<div class="nav_section">
<nav class="main_nav">
home
work
contact
</nav>
</div>
<div class="left_column">
<h1 class="main_title">Hello, I'm Jack</h1>
</div>
<div class="right_colomn">
<p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p>
</div>
</div>
</main>
To avoid overflowing, you can use the rule white-space: nowrap; for your h1.
However, that will avoid breaking the line after "Hello," as well.
So I would also recommend adding a <br /> after the Hello, for explicitly breaking that line.
That should solve your line-break issues, but I noticed you're also rotating the text by 90deg, and that can mess up the heading fitting inside the cell.
So I recommend adding the rule writing-mode: tb-rl (link) to make the text be written vertically, and then rotating it 180deg instead of 90 (so it becomes bottom-up instead of top-down)
This is your snippet with the suggested changes
#import url("https://fonts.googleapis.com/css2?family=Asap:wght#400;700&display=swap");
* {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #4a6163;
font-family: "Asap";
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.main_grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 0.25fr (1fr)[2];
grid-template-columns: 0.25fr repeat(2, 1fr);
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
max-height: 100%;
max-width: 100%;
}
.nav_section {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-area: 1 / 1 / 1 / 2;
border: 3px yellow solid;
}
.left_column {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-area: 1 / 2 / 1 / 3;
border: 1px yellow solid;
}
.right_colomn {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-area: 1 / 3 / 1 / 4;
border: 2px blue solid;
}
.left_column > h1 {
font-family: "Asap";
color: #f9faf4;
font-size: 13rem;
font-style: normal;
font-weight: normal;
line-height: 15.75rem;
text-transform: uppercase;
/* Updated the following 3 lines */
white-space: nowrap;
writing-mode: tb-rl;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: red 3px solid;
-o-object-fit: contain;
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
.main_bio {
color: #f2c4ce;
font-size: 1.75rem;
text-decoration: underline;
}
<main>
<div class="main_grid">
<div class="nav_section">
<nav class="main_nav">
home
work
contact
</nav>
</div>
<div class="left_column">
<h1 class="main_title">Hello,<br/>I'm Jack</h1>
</div>
<div class="right_colomn">
<p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p>
</div>
</div>
</main>
In my web app I am using css grid to build a basic home page. I want the top grid item: item-1 to be as tall as possible so that the whole grid fills the viewport. See image.
So that leaves no gap at the bottom. I have tried adjusting the height of the wrapper, the row height in grid-template-rows and changing the numbers in each individual item's grid-column value. How do I make item-1 cover more of the viewport and moves the 4 items below it down to touch the bottom?
.wrapper {
margin-top: -25px;
width:100vw;
height: 70vh;
// border: 2px solid #ccc;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(4, 90px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
align-content: end;
padding-bottom: 10px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
text-align: center;
}
.item-1 {
margin-top: 50px;
background-image: url(../assets/imgs/placeholder.png);
grid-column: 1 / 5;
grid-row: 1 / 5;
}
.item-2 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.1);
}
.item-3 {
grid-column: 3 / 5;
background-color: rgba(250, 250, 250, 0.4);
}
.item-4 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.4);
}
.item-5 {
grid-column: 3/ 5;
background-color: rgba(250, 250, 250, 0.4);
}
<div class="wrapper">
<div class="box item-1"></div>
<div tappable (click)="loadAbout()" class="box item-2"><i class="icon fa fa-info"></i>About</div>
<div tappable (click)="loadHowTo()" class="box item-3"><i class="icon fa fa-question"></i>How To</div>
<div tappable (click)="loadList()" class="box item-4"><i class="icon fa fa-signal"></i>List</div>
<div tappable (click)="loadContact()" class="box item-5"><i class="icon fa fa-comments"></i>Contact Us</div>
</div>
Set the wrapper grid-template-rows to auto 100px 100px.
html,
body {
font-family: Arial;
margin: 0;
padding: 0;
}
.grid {
width: 100vw;
height: 100vh;
background: #333;
display: grid;
grid-template-rows: auto 100px 100px;
grid-template-columns: repeat(4, 90px);
grid-gap: 5px;
justify-content: center;
}
.grid * {
color: white;
font-size: 120%;
background: rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.grid .grid-item-1 {
grid-column: 1 / 5;
grid-row: 1;
}
.grid .grid-item-2,
.grid .grid-item-3 {
grid-row: 2;
}
.grid .grid-item-4,
.grid .grid-item-5 {
grid-row: 3;
}
.grid .grid-item-2,
.grid .grid-item-4 {
grid-column: 1 / 3;
}
.grid .grid-item-3,
.grid .grid-item-5 {
grid-column: 3 / 5;
}
<div class="grid">
<div class="grid-item-1"></div>
<div class="grid-item-2">about</div>
<div class="grid-item-3">how to</div>
<div class="grid-item-4">list</div>
<div class="grid-item-5">contact us</div>
</div>
making width: 100vh; to your .wrapper and .item-1 divs might be what you're looking for. This should omit the need for negative margins, padding-bottom and align-content properties.
Hope that helps!
.wrapper {
/* margin-top: -25px; */
width: 100vw;
height: 100vh; /* made 100vh */
/* // border: 2px solid #ccc; */
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(4, 90px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
/* align-content: end; */
/* padding-bottom: 10px; */
}
.box {
background-color: orange;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
text-align: center;
}
.item-1 {
/* margin-top: 50px; */
background-image: url(../assets/imgs/placeholder.png);
grid-column: 1 / 5;
grid-row: 1 / 5;
height: 100vh;
}
.item-2 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.1);
}
.item-3 {
grid-column: 3 / 5;
background-color: rgba(250, 250, 250, 0.4);
}
.item-4 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.4);
}
.item-5 {
grid-column: 3/ 5;
background-color: rgba(250, 250, 250, 0.4);
}
<div class="wrapper">
<div class="box item-1"></div>
<div tappable (click)="loadAbout()" class="box item-2"><i class="icon fa fa-info"></i>About</div>
<div tappable (click)="loadHowTo()" class="box item-3"><i class="icon fa fa-question"></i>How To</div>
<div tappable (click)="loadFreq()" class="box item-4"><i class="icon fa fa-signal"></i>List</div>
<div tappable (click)="loadContact()" class="box item-5"><i class="icon fa fa-comments"></i>Contact Us</div>
</div>
I have recently started using the Grid layout in CSS and I am trying to make the elements in one of the grid areas fill the whole area. It works to set the width to 100% of the parent. But I have a really hard time getting the height of my div to be the same as the parent div. Here is some code to showcase my problem:
body {
width: 100vw;
height: 100vh
}
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: [sidebar-col-start] 15% [sidebar-col-end content-col-start] auto [content-col-end];
grid-template-rows: [sidebar-row-start content-row-start] auto [sidebar-row-end footer-row-start] 10% [footer-row-end];
}
.area {
grid-column: content-col-start / content-col-end;
grid-row: content-row-start / footer-row-start;
background-color: rgba(255, 0, 0, 0.4);
align-items: stretch;
}
.footer {
grid-column: sidebar-col-start / content-col-end;
grid-row: footer-row-start / footer-row-end;
background-color: rgba(0, 255, 0, 0.4);
}
.sidebar {
grid-column: sidebar-col-start / sidebar-col-end;
grid-row: sidebar-row-start / sidebar-row-end;
background-color: rgba(0, 0, 0, 0.4);
}
.red {
background-color: red;
height: 100%;
}
<div class="grid">
<div class="sidebar">
</div>
<div class="area">
<div class="red">
</div>
</div>
</div>
Link to Codepen: https://codepen.io/Martin36/pen/ayyoxv
My question is: How do I make a div fill the whole parent (which is a grid area)? Or more specifically, how do I make the height of the children match the parent's height?
Set .red with a min-height of 100vh.
body {
margin: 0;
width: 100vw;
height: 100vh
}
.grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: [sidebar-col-start] 15% [sidebar-col-end content-col-start] auto [content-col-end];
grid-template-rows: [sidebar-row-start content-row-start] auto [sidebar-row-end footer-row-start] 10% [footer-row-end];
}
.area {
grid-column: content-col-start / content-col-end;
grid-row: content-row-start / footer-row-start;
background-color: rgba(255, 0, 0, 0.4);
align-items: stretch;
}
.footer {
grid-column: sidebar-col-start / content-col-end;
grid-row: footer-row-start / footer-row-end;
background-color: rgba(0, 255, 0, 0.4);
}
.sidebar {
grid-column: sidebar-col-start / sidebar-col-end;
grid-row: sidebar-row-start / sidebar-row-end;
background-color: rgba(0, 0, 0, 0.4);
}
.red {
background-color: red;
height: 100vh;
}
<div class="grid">
<div class="sidebar">
</div>
<div class="area">
<div class="red">
</div>
</div>
</div>