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

[Virat_4]

HTML:

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

CSS:

.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;
}

[gce517]

The problem is in your column distribution.

Try this:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 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";
}

This will fix bottom-left, bottom-right, and also both side bars.