How can I make the divs take equal space in css grids?

Question

I am trying to make a grid of 6 div boxes and I don't know what I am doing wrong because 2 of the boxes are taking additional space that they shouldn't. Can someone please tell me what's wrong with this code. An image is provided to show what the outcome looks like currently. as you can see the boxes on the right are taking more space than the other four.

Html

<div class="second-box">

  <div class="box1"> 

  </div>
  <div class="box2"> 

  </div>
  <div class="box3">

  </div>
  <div class="box4">

  </div>
  <div class="box5">

  </div>
  <div class="box6">
  </div>

</div>

CSS

.second-box{

display: grid;
grid-template-rows: "2fr 2fr 2fr";
 grid-template-columns:"2fr 2fr 2fr";
grid-template-areas: 
"box1 box2 box3"
"box4 box5 box6";
margin: 50px;
}

.box1{
background-color: darkolivegreen;
grid-area: box1;

}

.box2{
background-color: rgba(108, 148, 39, 0.267);
grid-area: box2;

}

.box3{
background-color: darkgoldenrod ;
grid-area: box3;

}

.box4{
background-color: fuchsia;
grid-area: box4;

}

.box5{
background-color: darkcyan;
grid-area: box5;

}

.box6{

background-color:darkgrey;
grid-area: box6;
}

How is the outer box (secondbox) sized? Please could you put your code into a working snippet so we can see the problem as I can't reproduce it given the code you have provided so far. — A Haworth, Aug 31 '21 at 11:07
Look at this https://stackoverflow.com/questions/47601564/equal-width-columns-in-css-grid — Hartha, Aug 31 '21 at 11:07

score 1 · Answer 1 · answered Aug 31 '21 at 11:13

There are extraneous quotation marks enclosing 2fr 2fr 2fr in your code.

.second-box {
  width: 80vw;
  height: 80vh;
  display: grid;
  grid-template-rows: "2fr 2fr 2fr";
  grid-template-columns: "2fr 2fr 2fr";
  grid-template-areas: "box1 box2 box3" "box4 box5 box6";
}

.box1 {
  background-color: darkolivegreen;
  grid-area: box1;
}

.box2 {
  background-color: rgba(108, 148, 39, 0.267);
  grid-area: box2;
}

.box3 {
  background-color: darkgoldenrod;
  grid-area: box3;
}

.box4 {
  background-color: fuchsia;
  grid-area: box4;
}

.box5 {
  background-color: darkcyan;
  grid-area: box5;
}

.box6 {
  background-color: darkgrey;
  grid-area: box6;
}

<div class="second-box">

  <div class="box1">
    Lorem Ipsum Dolar Immet
  </div>

  <div class="box2">

  </div>
  <div class="box3">

  </div>
  <div class="box4">

  </div>
  <div class="box5">

  </div>
  <div class="box6">
  </div>

</div>

Come on, Just use your debugging tool before asking

How can I make the divs take equal space in css grids?

1 Answers1