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

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]

12th Nov 2022, 9:51 AM
Team B.I
Team B.I - avatar
2 Answers
+ 2
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.
12th Nov 2022, 10:38 AM
Lisa - avatar
+ 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
12th Nov 2022, 12:26 PM
JaScript - avatar