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


<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>



.container {

display: grid;

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

grid-template-rows: 1fr 1fr 1fr;


"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;


As is almost always the case with computers, it’s doing it because you are telling it to do it.

I see this:

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

First of all, don’t you have 4 columns?

And it tells this:

"leftsidebar bottom-left bottom-right rightsidebar"

that you wand the bottom left to get 2 frames and the bottom right to get 1.