如何使 div 在 css 网格中占据相等的空间？ [复制]答案

【问题标题】：How can I make the divs take equal space in css grids? [duplicate]如何使 div 在 css 网格中占据相等的空间？ [复制]
【发布时间】：2021-10-29 23:53:12
【问题描述】：

我正在尝试制作一个由 6 个 div 框组成的网格，但我不知道我做错了什么，因为其中 2 个框占用了它们不应该占用的额外空间。有人可以告诉我这段代码有什么问题吗？提供了一张图片来显示当前的结果。如您所见，右侧的框比其他四个框占用更多空间。

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

【问题讨论】：

外盒（secondbox）的尺寸如何？请您将您的代码放入一个有效的 sn-p 中，以便我们可以看到问题，因为鉴于您目前提供的代码，我无法重现它。
看看这个stackoverflow.com/questions/47601564/…

标签： javascript html css

【解决方案1】：

您的代码中有多余的引号将 2fr 2fr 2fr 括起来。

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

来吧，在询问之前使用你的调试工具

【讨论】：