跨越下一个单元格后如何使我的网格单元格大小相同？

Question

在此处输入图像描述

在跨越下一个单元格后，如何使我的网格单元格大小相同？ 到目前为止，这是我尝试过的

 .factory { display: grid; grid-template-columns: 1fr 1fr 2fr; height: 600px; gap: 10px; margin-top: 100px; padding: 10px; }.factory>div { background-color: gray; border: 1px green solid; }.image-1 { width: 100%; height: auto; }.div-3 { grid-column: 3 / span 5; }.div-5 { grid-column: 1 / span 2; }

 <div class="factory"> <div class="div-1">box1</div> <div class="div-2">box2</div> <div class="div-3">box3</div> <div class="div-5">box5</div> <div class="div-6">box6</div> </div>

如您所见，box6 小于 boxes 的 rest。

Answer 1

您的问题是，在 div-3 上，您尝试在第 3 列开始后跨越 5 列，这将使浏览器尝试向网格中再添加 5 列。

.div-3 {
  grid-column: 3 / span 5;
}

您可以完全删除此部分，因为您已经在grid-template-columns: 1fr 1fr 2fr; 第三列应该是前两列空间的两倍。

另一种选择是跨越 1

.div-3 {
  grid-column: 3 / span 1;
}

您可以使用检查工具清楚地看到这一点。

 .factory { display: grid; grid-template-columns: 1fr 1fr 2fr; height: 600px; gap: 10px; margin-top: 100px; padding: 10px; }.factory>div { background-color: gray; border: 1px green solid; }.image-1 { width: 100%; height: auto; } /*.div-3 { grid-column: 3 / span 5; }*/.div-5 { grid-column: 1 / span 2; }

 <div class="factory"> <div class="div-1">box1</div> <div class="div-2">box2</div> <div class="div-3">box3</div> <div class="div-5">box5</div> <div class="div-6">box6</div> </div>