1

I'm trying to create a responsive grid layout with responsive, colored gaps, where the gap size is proportionate to the width of the parent container. The problem is that the vertical gap does not reach the bottom of the grid.

I have created a grid container where I set the gap size in % and the background color of the gaps (see below code and https://jsfiddle.net/aavvww/o3Lcjd7w/16/). The problem does not occur if I set a fixed gap size in px.

.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>

This question Grid gap percentage without height explains why the problem occurs but it does not give a solution.

Arie
  • 103
  • 2
  • 9
  • Possible duplicate of [Grid gap percentage without height](https://stackoverflow.com/questions/53563613/grid-gap-percentage-without-height) – Pierre-Yves Legeay Aug 04 '19 at 13:59

2 Answers2

2

This question Grid gap percentage without height explains why the problem occurs. It helped me to find the following solution:

  1. Instead of setting grid-gap, set grid-column-gap and grid-row-gap separately, with grid-row-gap equal to grid-column-gap / (1 - grid-column-gap).
  2. Set padding-bottom of the container equal to grid-column-gap.

For example: if grid-column-gap is 0.1 (10%), then grid-row-gap is 0.1 / (1 - 0.1) or 0.1111 (11.1%).

This works for any percentage value of grid-column-gap.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10%;
  grid-row-gap: 11.1%;
  padding-bottom: 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>

This solution can be extended to grids with more than two columns. If the number of gaps is 'n' (n+1 columns), then grid-row-gap is grid-column-gap / (1 - n * grid-column-gap) and padding-bottom is n * grid-column-gap. See below example with n = 2 (3 columns).

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 10%;
  grid-row-gap: 12.5%;
  padding-bottom: 20%;
  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 class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
</div>
Arie
  • 103
  • 2
  • 9
0

body{
height: 100%;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10%;
  background-color: black;
  padding-bottom: 9%;
}

.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>
ALi
  • 146
  • 2
  • Many thanks for your prompt reply. I tried your solution and it works. It even works without the body {} that you added to the CSS. – Arie Aug 04 '19 at 11:16
  • But why 9% padding-bottom? What if the gap size has other percentage values? – Arie Aug 04 '19 at 11:17