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

HTML-CSS
1

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;

}
2

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.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.