Why is this CSS grid overflowing?

March 7, 2023

Why is this grid bigger than it’s container? In my mathematical calculations 45+20+35 should equal to 100%. The problem does not occur when fractions are used.

What is causing the overflowing issue when using percentages? Is it the gap property being added? How should one account for that when using percentages?

body {
  width: 100%;    
}

.photo-grid {
  max-width: 100%;
  margin: 50px 0;
  height: 300px;
  display: grid;
  grid-template-columns: 45% 20% 35%;
  grid-template-rows: repeat(2, 1fr);
  gap: 30px;
  grid-template-areas: "column-1 column-2 column-3" "column-1 column-2 column-3";
}

.column-1 {
  grid-area: column-1;
}

.photo-1 {
  height: calc(80% - 30px);
  margin-bottom: 30px;
}

.column-2 {
  grid-area: column-2;
}

.photo-2 {
  height: 100%;
}

.column-3 {
  grid-area: column-3;
}

.photo-3 {
  height: calc(50% - 15px);
  margin-bottom: 30px;
}

.photo-4 {
  height: calc(50% - 15px);
}

.textblock {
  background: salmon;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="photo-grid">
  <div class="column-1">
    <div class="photo-1">
      <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="Team na ziplinen" loading="lazy" />
    </div>
    <div class="textblock">
      <div>
        <p class="bold">Textblock</p>
        <p>Subtext</p>
      </div>
    </div>
  </div>
  <div class="column-2">
    <div class="photo-2">
      <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" loading="lazy" />
    </div>
  </div>
  <div class="column-3">
    <div class="photo-3">
      <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" loading="lazy" />
    </div>
    <div class="photo-4">
      <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" loading="lazy" />
    </div>
  </div>
</div>

>Solution :

Yup, it’s because of the gap.

You can use fraction units to get rid of this behavior:

grid-template-columns: 4.5fr 2fr 3.5fr;

If you still want to use percentages, you have to calculate the available room according to your set gap ( i edited this answer and applied an example in the snippet)

Additionally, instead of using containers with classes, you can access the grid-cells using css child-selectors like nth-child or nth-of type to style them and position them by using grid-column and grid-row.

I simplified your source for this example:

*{
margin: 0;
padding: 0;
}

.photo-grid {
  margin: 50px 0;
  height: 300px;
  
  display: grid;
  gap: 30px;
  /*
   * easy Solution: grid-template-columns: 4.5fr 2fr 3.5fr;
   */
  
  /*
   * complex solution: use calc() to calculate the available space per column excluding gaps
   * (available space = gap * (columnCount - 1) / columnCount
   */
  --gapSpace: calc((30px * 2) / 3);

  grid-template-columns: calc(45% - var(--gapSpace)) calc(20% - var(--gapSpace)) calc(35% - var(--gapSpace));
  grid-template-rows: repeat(2, 1fr);
}

.photo-grid img:nth-of-type(2){
  grid-column: 2 / 3;
  grid-row: 1/3;
}

.textblock {
  grid-column: 1/2;
  grid-row: 2/3;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: salmon;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

<div class="photo-grid">

<img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" loading="lazy" />

<img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" loading="lazy" />

<img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" loading="lazy" />

<img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" loading="lazy" />

<div class="textblock">
  <p class="bold">Textblock</p>
  <p>Subtext</p>
</div>

</div>