Understanding auto in css grids

Question

I am pretty new to Web development and I am trying to learn CSS grids. While learning the CSS grid I tried to make one simple layout. It has one header section, one menu section, one sidebar section, and one footer section.

I used auto while defining grid template rows for the 2nd row, and gave conatiner height as 100%, so that 2nd row will stretch fully in the remaining space left by row 1 and 2. But it didn't work that way, i am trying to figure out why 2nd row is not stretching vertically in the remaning space left.

Here is the conatiner css in which i defined the 2nd row as auto and conatiner height as 100%.

.container {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 40px auto 40px;
}

fiddle link: https://jsfiddle.net/791vtd4z/

Terry · Answer 1 · 2020-04-02T14:47:39.727

That is because you did not give body a fixed height, yet you have .container a relative height: therefore, when the child .container simply stretches to its content height and not any further, since there's nothing absolute to compare against by using 100% (ask yourself: "100% of what?").

A solution will be to set .container { min-height: 100vh; } to fix that, which tells the element to at least be as tall as the viewport, and allow it to grow should the content inside menu or sidebar grow beyond what the viewport can contain.

* {
  margin: 0;
  top: 0;
  bottom: 0;
  font-family: sans-serif;
  font-size: 1.2em;
}

title {
  display: none;
}

.container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
}

.Header {
  background-color: beige;
  grid-column: 1/-1;
}

.Menu {
  background-color: red;
}

.Sidebar {
  background-color: burlywood;
  grid-column: 2/-1;
}

.Footer {
  background-color: aquamarine;
  grid-column: 1/-1;
}

<div class="container">
  <div class="Header">Header</div>
  <div class="Menu">Menu</div>
  <div class="Sidebar">Sidebar</div>
  <div class="Footer">Footer</div>
</div>

symlink · Accepted Answer · 2020-04-02T15:09:04.393

To build on Terry's answer, you can achieve your desired result by giving body a height of 100vh, you could change the height of .container to 100vh, or you could give html and body a height of 100% (and keep the 100% height of .container).

This is because 100vh gives an element the full height of the viewport regardless of the height of its parents, while setting an element's full height using a percentage (i.e. 100%) means the element takes the full height of its parent, whatever that is. So an element with a height of 100% could still be zero, if its parent has no height.

To put this another way, when setting an element's height to 100% all of its parents need to be 100% as well for that element to take up the full viewport.

html, body{
   height: 100%;
}

* {
    margin: 0;
    top: 0;
    bottom: 0;
    font-family: sans-serif;
    font-size: 1.2em;
}

title {
    display: none;
}

.container {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 40px auto 40px;
}

.Header {
    background-color: beige;
    grid-column: 1/-1;
}

.Menu {
    background-color: red;
}

.Sidebar {
    background-color: burlywood;
    grid-column: 2/-1;
}

.Footer {
    background-color: aquamarine;
    grid-column: 1/-1;
}

<div class="container">
        <div class="Header">Header</div>
        <div class="Menu">Menu</div>
        <div class="Sidebar">Sidebar</div>
        <div class="Footer">Footer</div>
    </div>

Understanding auto in css grids

2 Answers2