CSS 网格和最小内容/自动

Question

所以我试图用 CSS 网格创建下面的图像。 min-content 和 auto 似乎不太好。 这是一个小提琴！ https://jsfiddle.net/pw9L52h0/

HTML：

<div class="grid">
  <div class="label-1">label 1</div>
  <div class="label-2">label 2</div>
  <div class="label-3">label 3</div>
  <div class="label-4">label 4</div>
  <div class="label-5">label 5</div>
  <div class="label-6">label 6</div>
  <div class="label-7">label 7</div>
</div>

CSS：

.grid {
  display: grid;
  grid-template-rows: 60px min-content auto;
  grid-template-columns: 60px min-content auto;
  width: 230px;
  height: 230px;
  background-color: lightgray;
}

.label-1 {
  grid-row-start: 0;
  grid-row-end: 1;
  grid-column-start: 0;
  grid-column-end: 1;
  background-color: red;
}

.label-2 {
  grid-row-start: 0;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: green;
}

.label-3 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 0;
  grid-column-end: 1;
  background-color: blue;
}

.label-4 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: yellow;
}

.label-5 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: orange;
}

.label-6 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: pink;
}

.label-7 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: purple;
}

它最终是这样的：

Answer 1

在只需要几行代码的情况下，您过于复杂，如下所示：

 .grid { display: grid; grid-template-rows: 60px min-content auto; grid-template-columns: 60px min-content auto; width: 230px; height: 230px; background-color: lightgray; }.label-1 { background-color: red; }.label-2 { grid-column:span 2; /* this */ background-color: green; }.label-3 { grid-row:span 2; /* and this */ background-color: blue; }.label-4 { background-color: yellow; }.label-5 { background-color: orange; }.label-6 { background-color: pink; }.label-7 { background-color: purple; }

 <div class="grid"> <div class="label-1">label 1</div> <div class="label-2">label 2</div> <div class="label-3">label 3</div> <div class="label-4">label 4</div> <div class="label-5">label 5</div> <div class="label-6">label 6</div> <div class="label-7">label 7</div> </div>

您的代码的主要问题是您从0开始计数，您需要从1开始。 3 列表示 4 行 (1,2,3,4)。

您可以在控制台中清楚地看到grid-start-* = 0无效，而grid-end-* = 1会将元素的末尾放在第一行，在开头创建一个隐式的新列/行，因此您将结束有 4 列/行：

这是您使用正确数字修复的代码：

 .grid { display: grid; grid-template-rows: 60px min-content auto; grid-template-columns: 60px min-content auto; width: 230px; height: 230px; background-color: lightgray; }.label-1 { grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 2; background-color: red; }.label-2 { grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: 4; background-color: green; }.label-3 { grid-row-start: 2; grid-row-end: 4; grid-column-start: 1; grid-column-end: 2; background-color: blue; }.label-4 { grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; background-color: yellow; }.label-5 { grid-row-start: 2; grid-row-end: 3; grid-column-start: 3; grid-column-end: 4; background-color: orange; }.label-6 { grid-row-start: 3; grid-row-end: 4; grid-column-start: 2; grid-column-end: 3; background-color: pink; }.label-7 { grid-row-start: 3; grid-row-end: 4; grid-column-start: 3; grid-column-end: 4; background-color: purple; }

 <div class="grid"> <div class="label-1">label 1</div> <div class="label-2">label 2</div> <div class="label-3">label 3</div> <div class="label-4">label 4</div> <div class="label-5">label 5</div> <div class="label-6">label 6</div> <div class="label-7">label 7</div> </div>