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>
New contributor
max911 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.