I'm attempting to design a grid layout with responsive, colored spaces that adjust their size based on the width of the parent container. However, I encountered an issue where the vertical gaps do not extend all the way to the bottom of the grid.
To achieve this layout, I defined a grid container with percentage-based gap sizes and assigned background colors to these gaps. You can view the code snippet below:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10%;
background-color: black;
}
.pic {
padding-bottom: 100%;
background-size: contain;
background-repeat: no-repeat;
background-image: url(https://via.placeholder.com/512);
}<div class="container">
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>The challenge arises when using percentage-based grid gaps without specifying a fixed height. This article on Stack Overflow delves into the reasons behind this behavior but does not provide a definitive solution.