Placing the footer out of view using CSS grid

Question

I have a header that is 70px high, the main content which I want to fill the rest of the screen and then a 70px footer. I am trying to find the most simple approach of h

Answer 1

You can remove your footer from the explicit grid (change your explicit grid row definition into grid-template-rows: [header] 70px 1fr and remove grid-row: 3 from footer) and set the grid container height to calc(100vh + 70px) and set the implicit grid row (which is your footer height) using grid-auto-rows: 70px.

See demo below with vanilla CSS:

* {
  margin: 0;
  padding: 0;
}

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

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  height: calc(100vh + 70px); /* adding footer height */
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px 1fr; /* removed footer from here */
  grid-auto-rows: 70px; /* implicit grid height - footer height */
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  /*grid-row: 3;*/
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}

<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>

But again you'll have to do those messy calculations when new sections are added to the grid. A more dynamic option is to keep a grid item (zero-width adjuster element in demo below) just for setting the layout height:

• placed in the first column and spanned across the first two rows

• has height: 100vh set and pushed behind with z-index: -1 so that it doesn't affect the layout.

See demo below:

* {
  margin: 0;
  padding: 0;
}

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

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px 1fr; /* removed footer from here */
  grid-auto-rows: 70px; /* implicit grid height - footer height */
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  /*grid-row: 3;*/
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}

.adjuster { /* grid items spanning two rows with explicit height set */
  width: 0;
  position: relative;
  z-index: -1;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 100vh;
}

section { /* new sections added*/
  background: cadetblue;
}

<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>
<!-- height adjuster for viewport -->
<span class="adjuster"></span>
<!-- other page sections below -->
<section></section>
<section></section>

Excerpts on implicit and explicit grids from MDN:

The implicit and explicit grid (MDN)

If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them.

You can also define a set size for tracks created in the implicit grid with the grid-auto-rows and grid-auto-columns properties.

---

You can read more about Explicit and Implicit Grids here: CSS Grid unwanted column added automatically