Why are these grid areas overlapping?

Question

The foot area is overlapping the nav and main areas (as can be seen by the fact that the rounded bottom left corner of the section element which is contained in 'main' is invisible). The main area size is set to auto and the section element is set to height 100%. What's going on here?

body {
  margin: 0;
}

.wrapper {
  display: grid;
  height: 100vh;
    grid-template-areas: 
        "header header"
        "nav main"
        "foot foot";
  grid-template-rows: 3rem auto 3rem;
  grid-template-columns: 10rem auto;
  background-color: rgb(10, 2, 29);
}

header {
  grid-area: header;
  padding: 0.5rem;
}

nav {
  grid-area: nav;
  padding: 0.5rem;
}

main {
  grid-area: main;
}

section {
  width: auto;
  height: 100%;
  padding: 0.5rem;
  color: rgb(10, 2, 29);
  background-color: rgb(254, 254, 255);
  border-radius: 0.1rem 0 0 0.1rem;
}

footer {
  grid-area: foot;
  background-color: blue;
  padding: 0.5rem;
}

<div class="wrapper">
  <header>header</header>
  <nav>nav</nav>
  <main>
    <section id="page1">content1</section>
  </main>
  <footer>foot</footer>
</div>
<script src="main.js"></script>

score 1 · Accepted Answer · answered Aug 02 '19 at 15:25

You have padding set on your elements. That adds size to each box because the box-sizing property has a default value of content. You need to override the default.

Add this to your code:

* { box-sizing: border-box }

body {
    margin: 0;
}
.wrapper {
    display: grid;
    height: 100vh;    
    grid-template-areas: 
        "header header"
        "nav main"
        "foot foot";
    grid-template-rows: 3rem auto 3rem;
    grid-template-columns: 10rem auto;
    background-color: rgb(10, 2, 29);
}
header {
    grid-area: header;
    padding: 0.5rem;
}
nav {
    grid-area: nav;
    padding: 0.5rem;
}
main {
    grid-area: main;
}
section {
    width: auto;
    height: 100%;
    padding: 0.5rem;
    color: rgb(10, 2, 29);
    background-color: rgb(254, 254, 255);
    border-radius: 0.1rem 0 0 0.1rem;
    border: 5px dashed red; /* demo */
}
footer {
    grid-area: foot;
    background-color: blue;
    padding: 0.5rem;
}

/* new */
* { box-sizing: border-box; }

<div class="wrapper">
  <header>header</header>
  <nav>nav</nav>
  <main>
    <section id="page1">content1</section>
  </main>
  <footer>foot</footer>
</div>

More about box-sizing in this answer.

Why are these grid areas overlapping?

1 Answers1