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>