Altering css grid to include a fixed height header

Question

I'm trying to create a 3 x 3 grid in flexbox css along with a fixed height header.

I've managed to do this, but I want the total height of this to be 100%. At the moment the fixed height header (say 80px) causes my total height to be 100% + 80px.

How can I keep everything within 100% of the screen height?

Here is the code I tried:

* {border: 0; padding: 0; margin: 0; }
html, body, .grid { height: 100%; width: 100%;}
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: lightgray;
}
.item {
  text-align: center;
  border: 1px solid gray;
}

<div class="header">LOGO</div>
<div class="grid container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>  
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>  
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>  
</div>

is the grid container supposed to scroll if content overflows the vieport's height ? — G-Cyrillus, Aug 29 '18 at 16:10

score 1 · Answer 1 · answered Aug 29 '18 at 16:09

Make the body a flexbox column and the container flex:1 so it expands to the remaining height.

* {
  border: 0;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.container {
  display: grid;
  flex: 1;
  grid-template-columns: auto auto auto;
  background-color: lightgray;
}

.item {
  text-align: center;
  border: 1px solid gray;
}

<div class="header">LOGO</div>
<div class="grid container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

score 1 · Answer 2 · answered Aug 29 '18 at 16:33

Put the header inside the grid container and assign it to the first row with grid-template-columns and grid-area like this:

* {border: 0; padding: 0; margin: 0; }
html, body, .grid { height: 100%; width: 100%;}
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas:
      "header header header";
  background-color: lightgray;
}
.header { grid-area: header; }
.item {
  text-align: center;
  border: 1px solid gray;
}

<div class="grid container">
  <div class="header">LOGO</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>  
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>  
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>  
</div>

score 1 · Accepted Answer · answered Aug 29 '18 at 17:02

expecting feed back on comment that never came,

here's a proposition (based on this topic about flex), which lets the header be any size and the grid to overflow if needed without disturbing header position at screen, you do not have to mind about header's height to lay the grid.

Snippet shows the basic CSS needed for the layout and also demonstrates that padding , margin or an extra footer can be added without breaking the layout basis.

/* basic's of this layout */

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  overflow: auto;
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
}


/* end basic's*/

/* what comes here is only for demo and demonstrate that sizing is not required, flex handles it */


/* see about different height remaing 
and eventually a fixed footer in the way also */

footer {
  display: none;
}


/* see what happen when footer comes in the flow */

main:hover+footer {
  display: block;
}


/* end playing with extra mark up */


/* extra makeup and padding,margin to also alter sizing */

.flex {
  display: flex;
  align-items: center;
}

h1 {
  margin: auto 0.25em;
}

header,
footer {
  margin: 0.5em;
  border: solid;
  padding: 0.5em;
  background: lightblue;
}

.grid {
  grid-gap: 0.5em;
  padding: 0.5em;
}

.item {
  background-color: lightgray;
  border: solid;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vw;
}

<header class="header flex">LOGO
  <h1> title</h1>
</header>
<main class="grid container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</main>
<footer>is a footer too an option?</footer>

Altering css grid to include a fixed height header

3 Answers3