CSS grid with padding overflows container

Question

I am trying to create a footer whose width is 100% (of the body). On the left side of the footer, I want a logo. On the right side of the footer, I want some text. So I decided to try to use CSS grid.

This is almost exactly what I'm going for:

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  grid-template-columns: 30% 70%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

<div class="footer">
  <div class="footerGridLogo"></div>
  <div class="footerGridQuestions"></div>
</div>

However, I want to add some padding to the left of the grid, let's say 10%, so that the logo isn't so close to the left edge. So instead of a 30-70 split, I try a 10-25-65 split. However, the grid ends up overflowing. Why is that?

Demonstration of the issue:

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

<div class="footer">
  <div class="footerGridLogo">
  </div>
  <div class="footerGridQuestions">
  </div>
</div>

I realize that just adding another grid item of 10% instead of padding solves my problem, but I'm curious why padding doesn't work the same way.

Answer 1

First, instead of using percentage units use fr units. These units represent leftover space and are factored in after fixed lengths (such as padding) have been rendered.

So instead of this:

grid-template-columns: 30% 70%

Try this:

grid-template-columns: 3fr 7fr

More details:

• The difference between percentage and fr units in CSS Grid Layout

---

Second, remove the width: 100% on the container.

.footer {
  background-color: #2D1975;
  width: 100%; <---------- remove
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

When you set the .footer to display: grid it becomes (or remains) a block-level element. Such elements automatically occupy the full width of the parent.

However, if you add width: 100% to a block-level element it then adds any padding, margin and border to the calculation, resulting in an overflow. So just remove it.

---

Third, this whole problem can be avoided if you add the padding-left to the logo itself, and not to the grid container or grid item.