CSS网格-行拉伸不正确的问题

目暮deep-breaths lv.1

发布时间：2022-07-09 17:41:41 343

相关标签： # vue.js

我第一次尝试构建一个更高级的CSS网格（不是偶数个列和行），结果被卡住了。

以下是我想要的：https://imgur.com/pRKxwIO（实线是我试图定义的网格项，虚线表示行数和列数）

我需要列和行都是特定的宽度和高度。我将它们都设置为fr（宽度为28个“单位”，高度为16个“单位”，因此您会看到列的fr加起来是28个，行的fr加起来是16个）。

这些专栏都很好地遵循了我的规则。但是，我对下面代码中以方框5开头的行有问题。您可以在我的链接图像中看到，框5应该跨行2-4，框6应该跨行2-4，框7应该跨行2-3。但在我的结果中，它们都显示出相同的高度，这就把其余的盒子搞砸了。

有人能帮我找到代码中的错误吗？我花了2个小时排除故障并观看CSS网格教程，但就我所知，我已经按照他们说的方式定义了行和列跨度。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: 7fr 7fr 3fr 3fr 6fr 2fr;
  grid-template-rows: 6fr 2fr 3fr 2fr 3fr;
  justify-content: center;
  align-content: center;
}

.container > div {
  border: 1px solid black;
  padding: 1vmin;
}

.one {
  grid-column: 1 / 2;
  grid-rows: 1 / 2 ;
}

.two {
  grid-column: 2 / 4;
  grid-rows: 1 / 2 ;
}

.three {
  grid-column: 4 / 5;
  grid-rows: 1 / 2;
}

.four {
  grid-column: 5 / 7;
  grid-rows: 1 / 2;
}

.five {
  grid-column: 1 / 2;
  grid-rows: 2 / 4;
}

.six {
  grid-column: 2 / 5;
  grid-rows: 2 / 4;
}

.seven {
  grid-column: 5 / 7;
  grid-rows: 2 / 3;
}

.eight {
  grid-column: 1 / 2;
  grid-rows: 4 / 6;
}

.nine {
  grid-column: 2 / 3;
  grid-rows: 4 / 6;
}

.ten {
  grid-column: 3 / 5;
  grid-rows: 4 / 6;
}

.eleven {
  grid-column: 5 / 6;
  grid-rows: 3 / 5;
}

.twelve {
  grid-column: 6 / 7;
  grid-rows: 3 / 5;
}

.thirteen {
  grid-column: 5 / 7;
  grid-rows: 5 / 6;
}


  Box 1
  Box 2
  Box 3
  Box 4
  Box 5
  Box 6
  Box 7
  Box 8
  Box 9
  Box 10
  Box 11
  Box 12
  Box 13

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。