So I am trying to create a responsive grid layout for all screen sizes. When the screen size is decreasing the content in the grid are overflowing vertically. It’s as if the height of the columns in the last row are decreasing as seen in the attached picture. Can anyone help me fix this?Image of inspect
.gridContainer{
background: #101010;
width: 100%;
padding: 10% 5%;
}
.gridWrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 2%;
}
#mem1{
grid-row: 1 / span 2;
}
#mem4{
grid-column: 2;
grid-row: 2;
}
#mem5{
grid-column: 3;
grid-row: 2 / span 2;
}
#mem7{
grid-column: 2;
grid-row: 3 / span 2;
}
.mem{
padding: 2%;
border: solid 1px white;
}
.mem > img{
width: 100%; height: 100%;
object-fit: cover;
}<div class="gridContainer">
<div class="gridWrapper">
<div class="mem" id="mem1"><img src="images/concrete/concrete-tall-1.jpg"></div>
<div class="mem" id="mem2"><img src="images/concrete/concrete-wide-1.jpg"></div>
<div class="mem" id="mem3"><img src="images/concrete/concrete-wide-2.jpg"></div>
<div class="mem" id="mem4"><img src="images/concrete/concrete-wide-3.jpg"></div>
<div class="mem" id="mem5"><img src="images/concrete/concrete-tall-2.jpg"></div>
<div class="mem" id="mem6"><img src="images/concrete/concrete-wide-4.jpg"></div>
<div class="mem" id="mem7"><img src="images/concrete/concrete-tall-3.jpg"></div>
<div class="mem" id="mem8"><img src="images/concrete/concrete-wide-5.jpg"></div>
<div class="mem" id="mem9"><img src="images/concrete/concrete-wide-6.jpg"></div>
</div>
</div>>Solution :
you are giving gap in gridWrapper which is actually creating issue for overflowing the content because when gap and content height calculated it get larger than the available space.
So you can use minmax() function to define the minimum and maximum size of the grid. This will help prevent the grid items from overflowing the grid wrapper.
.gridWrapper {
display: grid;
grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(
100px,
1fr
);
grid-template-rows: minmax(100px, 1fr) minmax(100px, 1fr) minmax(
100px,
1fr
) minmax(100px, 1fr);
gap: 2%;
}
you need to change only style for grid-template-columns and grid-template-rows