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.

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

Solution 2

This is box-sizing.

The default value is content-box, which means that padding and border values are added to the width.

You can change this to border-box, which includes padding and border in the width.

Here is a common approach, from this article:

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

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

Solution 3

I fixed css-grid / padding problems adding next code to css:

*, *::before, *::after {
  box-sizing: border-box;
}

Comments

[JFFIGK]

what could width: 100% be replaced with, if the grid should fill the parent?

[Michael Benjamin]

See Grid's "line-based placement" features. In particular, the grid-column shorthand property. For example: grid-column: 1 / -1 in an explicit grid.

[Artur Müller Romanov]

Be careful with this approach. It screwed up the width of my project pages and laravel mix (+ vuejs) couldn't detect it. Only removing it and an IDE restart fixed the problem.

[sol]

How does restarting your IDE relate to changing a CSS property?

[Artur Müller Romanov]

Don't ask me. If you use phpstorm with a Filewatcher, there might be a way for it to relate.

[Artur Müller Romanov]

Just wanted to say, that instead of adding box-sizing to the html element you can add it to whatever you want and it works. Thanks @sol