CSS网格和最小内容/自动

所以我尝试用CSS网格创建下面的图像。min content和auto似乎玩得不太好。这是一把小提琴

HTML:

结果是这样的：

---

您只需要以下几行代码就可以将其过度复杂化：

.grid{
显示：网格；
网格模板行：60px最小内容自动；
网格模板列：60px最小内容自动；
宽度：230px；
高度：230像素；
背景颜色：浅灰色；
}
.标签-1{
背景色：红色；
}
.标签-2{
格线柱：跨度2；/*此*/
背景颜色：绿色；
}
.标签-3{
网格行：span 2；/*和此*/
背景颜色：蓝色；
}
.标签-4{
背景颜色：黄色；
}
.标签-5{
背景颜色：橙色；
}
.标签-6{
背景颜色：粉红色；
}
.标签-7{
背景颜色：紫色；
}

标签1
标签2
标签3
标签4
标签5
标签6
标签7

我明白了，所以CSS网格会自动修复这个问题。但我很好奇，当我特别设置行开始、列开始等时，我是否没有完全按照预期做？还是CSS网格有什么我不知道的地方？@K-ToxicityinSOisgrowing。您正在使网格算法变得有点棘手，并且由于您使用的所有开始/结束，您的网格正在创建一个额外的行和一个额外的列。我将尝试更新以解释为什么会发生这种情况，但是自动放置对于您的项目来说已经足够了，并且只有2个项目需要跨越2列或2行。从零开始是culPit！非常感谢你，伙计@土壤生长中的K-毒性。我认为以1结尾才是罪魁祸首；）从0开始是无效的，不会有任何效果。哈哈，我想你可以这么说。

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

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