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.

Rogatory

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.

Yoakum

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

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

Removing the width: 100%; worked for me. – Hughs

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

Ginoginsberg

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

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

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

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 @Ginoginsberg – Deannedeans

Answer 3

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

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

Karankaras

Answer 4

Have you ever tried to remove this line

    width: 100%;

from your CSS code?

Just try and see the result.

Joinville

Answer 5

When you do padding of an HTML element it displaces the content (actually creates space) with respect to its border

When you do 10% padding-left to your footer, the content displaces by 10% from the left border. But you have 25% and 65% grid ratio which totals to 90%. The rest of 10% is background.

To resolve this issue use a ratio of 25% and 75% or any ratio which totals to 100%. Still the padding will cause the total width to overflow by 10%. So set the width of the footer to 90% that must resolve the overflow problem.

.footer {
	background-color: #2D1975;
	width: 90%;
	height: 350px;
	display: grid;
    padding-left:10%;
    	grid-template-columns: 25% 75%;
    }
    
    .footerGridLogo {
    	background-color: red;
    }
    
    .footerGridQuestions {
    	background-color: green;
    }

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

Ricciardi

Answer 6

None of the answers helped me with my problem. My grid would screw up the grid-width if I added padding. The only thing that helped me was to create a padding div inside the grid columns around the grid content:

<div class="grid">
  <div class="pad">
    content...
  </div>
</div>

<style lang="scss">
.grid {
    display: grid;
    .pad {
      padding: 1vw;
      content-styles...
    }
</style>

Mohammadmohammed

Answer 7

You are padding 10% left of the div and then assigning the width to be 100% this is causing a %110 total including the padding.

Pad in the div above the footer and assign the contents of the child div to 100%

.container {
  padding: 10px;
}

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

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

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

Aisne