Title: Why wont background colour show?
Tags: css;grid
Question: 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:
&quot;l l l c c c c c c c r r&quot;;
.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/

Here is the accepted answer: By default, neither your .container nor the body has a height greater than zero.  To fix this, add a width and height to the body element as well as a height to the .container element.  Below is an example that should work as expected.
body, html {
margin: 0;
padding: 0;
font-family: 'lato', sans-serif;
height: 100vh;
width: 100%;
.container {
height: 100%;
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;
<!DOCTYPE html&gt;
<html&gt;
<head&gt;
<link rel="stylesheet" href="styles.css"&gt;
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&amp;display=swap"
rel="stylesheet"&gt;
</head&gt;
<body&gt;
<div class="container"&gt;
<div class="left-area"&gt;
</div&gt;
<div class="chat-area"&gt;
</div&gt;
<div class="right-area"&gt;
</div&gt;
</div&gt;
</body&gt;
</html&gt;

Here is another answer: There is no content in your <div&gt; elements, so they are technically 0px height and 0px width. You can use the width &amp; 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&gt;
<html&gt;
<head&gt;
<link rel="stylesheet" href="styles.css"&gt;
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&amp;display=swap"
rel="stylesheet"&gt;
</head&gt;
<body&gt;
<div class="container"&gt;
<div class="left-area"&gt;
test
</div&gt;
<div class="chat-area"&gt;
test
</div&gt;
<div class="right-area"&gt;
test
</div&gt;
</div&gt;
</body&gt;
</html&gt;

Here is another answer: 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.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2022:00:03/04/22', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><grid>', 'Title': 'Why wont background colour show?', 'ViewCount': 95, 'id': 71357820, 'user_AboutMe': '', 'user_AccountId': 12879078.0, 'user_DisplayName': 'Shaahid', 'user_Reputation': 1233.0, 'user_Views': 57.0, 'user_id': 16381945.0}}