Why is my bottom left and right not the same width?

Question

HTML:
[code]
<div class="container">
<div class="header">header</div>
<div class="leftsidebar">leftsidebar</div>
<div class="main-top">main top</div>
<div class="rightsidebar">right side bar</div>
<div class="bottom-left">bottom left</div>
<div class="bottom-right">bottom right</div>
<div class="footer">footer</div>
</div>
[/code]

CSS:
[code]
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"header header header header"
"leftsidebar main-top main-top rightsidebar"
"leftsidebar bottom-left bottom-right rightsidebar"
"footer footer footer footer";
}

.header {
background-color: skyblue;
grid-area: header;
}
.leftsidebar {
background-color: green;
grid-area: leftsidebar;
}
.main-top {
background-color: red;
grid-area: main-top;
}
.rightsidebar {
background-color: pink;
grid-area: rightsidebar;
}
.bottom-left {
background-color: purple;
grid-area: bottom-left;
}
.bottom-right {
background-color: yellow;
grid-area: bottom-right;
}
.footer {
background-color: blue;
grid-area: footer;
}
[/code]

Answer 1

People can test your code if you put it on sololearn playground and link it:
– Go to Code section, click +, select the programming language, insert your code, save.
– Come back to this thread, click +, Insert Code, sort for My Code Bits, select your code.

Answer 2

You have 4 columns, the third property specifies third column. You get the same width with:

grid-template-columns: 1fr 2fr 2fr;
or better
grid-template-columns: 1fr 2fr 2fr 1fr;

https://code.sololearn.com/WyLex7qCq2qO/?ref=app