I'm trying to make a page that takes up 100% of the height split into red, blue, green. I did that with css grid but the background colour isn't showing up.

Could someone explain to me why its not showing up and how to fix it?

```
body, html {

    margin: 0;
    padding: 0;
    font-family: 'lato', sans-serif;

}

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "l l l c c c c c c c r r";
}

.left-area {
    grid-area: l;
    background-color: red;
}

.chat-area {
    grid-area: c;
    background-color: green;
}

.right-area {
    grid-area: r;
    background-color: blue;
}

```

<https://jsfiddle.net/ukL1vbgn/>