CSS Grid and min-content/auto - css

Question

So I'm trying to create the below image with CSS grid. min-content and auto doesn't seem to be playing nice. Here is a fiddle! 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;
}
It ends up like this:

Answer 1

You are overcomplicating this where you only need few line of code like below:
.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>
The main issue with your code is that you are counting from 0 where you need to start from 1. 3 columns means 4 lines (1,2,3,4).
You can clearly see in the console that grid-start-* = 0 is invalid and grid-end-* = 1 will place the end of the element at the first line creating an implicit new column/row at the beginning thus you will end having 4 columns/rows:
Here is your code fixed with the correct numbers:
.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>