Question posted in 
I am creating a video grid which needs to be of 4 elements, attaching similar code with images instead of videos.
The grid area has to take full width is not respecting the allotted space of 1fr, so each time all other grid areas are 1fr, the last one which has to take full width will not take 1fr height and overflow,
.container {
display: grid;
background-color: pink;
padding: 4rem;
width: 100%;
height: 600px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 1rem;
grid-template-areas: "footer footer footer" "content-1 sidebar sidebar" "content-2 sidebar sidebar"
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar {
flex: 1;
grid-area: sidebar;
}
.content-1 {
grid-area: content-1;
}
.content-2 {
grid-area: content-2;
}
.footer {
flex: 3;
grid-area: footer;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
display: flex;
justify-content: center;
padding: 20px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
}<div class="container">
<div class="item sidebar">
<img src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="item content-1"> <img src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></div>
<div class="item content-2"> <img src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></div>
<div class="item footer"> <img style={{height: "2rem", width: "2rem"}} src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></div>
</div>
2
Answers
The issue of the last grid area not taking the full width and height correctly, you need to ensure the grid structure and CSS are properly defined.
Ensure .footer class has height 100%, like this:
Actually 1fr in the grid is a little bit misleading. Use minmax instead.