'Why wont background colour show?

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/

cssgrid


Solution 1:[1]

There is no content in your <div> elements, so they are technically 0px height and 0px width. You can use the width & height CSS-properties to specify their size, or simply just put content into them - doing either will show the element's background-color

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;
    width: 100px;
    height: 100px;
    background-color: red;
}

.chat-area {
    grid-area: c;
    width: 100px;
    height: 100px;
    background-color: green;
}

.right-area {
    grid-area: r;
    width: 100px;
    height: 100px;
    background-color: blue;
}
<!DOCTYPE html>
<html>


<head>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap"
        rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="left-area">
          test
        </div>

        <div class="chat-area">
          test
        </div>

        <div class="right-area">
          test
        </div>

    </div>


</body>

</html>

Solution 2:[2]

I think that's happening because the div elements don't have any content inside them. You can put somenthing inside them or define a height: 100vh into your areas.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sigurd Mazanti
Solution 2 Christian Menezes

Related Questions