CSS Grid: content is not showing up

Question

I want to make a grid layout which looks like this:

"sidebar header header header header"
"sidebar content content content content"
"footer footer footer footer footer"

I try to do that with the following code:

HTML :

<main>
  <section class = "header"></section>
  <aside class = "sidebar"></aside>
  <section class = "content"></section>
  <section class = "footer"></section>
</main>

CSS:

.header {
    background-color: red;
    grid-area: header;

}

.sidebar {
    background-color: blue;
    grid-area: sidebar;

}

.content {
    background-color: yellow;
    grid-area: content;
}

.footer {
    background-color: green;
    grid-area: footer;
}

main {
    display: grid;
    grid-template-columns: 50px 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 1fr 100px;
    grid-template-areas: "sidebar  header  header  header  header"
                         "sidebar  content content content content"
                         "footer footer footer footer footer";
}

However, when I try to run my code, the yellow content is not showing up.

Here is the JSFiddle with the code : https://jsfiddle.net/wd0k5b4r/

Did you try adding `position: absolute; top: 0; left: 0; width: 100%; height: 100%;` to the `main`? — xxMrPHDxx, Dec 08 '19 at 12:36
Apparently the grid compress its content to its minimal height, so the only height the browser see is 200px which is 100px + 100px of the first and third row. The above code should fix the problem — xxMrPHDxx, Dec 08 '19 at 12:41

CSS Grid: content is not showing up

0 Answers0