Grid „span n”

<div class="wrap-1">
    <div class="grid-1">1</div>
    <div class="grid-2">2</div>
    <div class="grid-3">3</div>
</div>Code language: HTML, XML (xml)

<div class="wrap-2">
    <div class="grid-1">1</div>
    <div class="grid-2">2</div>
    <div class="grid-3">3</div>
</div>Code language: HTML, XML (xml)

.wrap-1,
.wrap-2 {
display: grid;
grid-template-columns: repeat(6, 50px);
grid-template-rows: 50px;
}
.wrap-1 .grid-1,
.wrap-2 .grid-1 {
grid-column-start: 1;
grid-column-end: 2;
}
.wrap-1 .grid-2,
.wrap-2 .grid-2 {
grid-column-start: 2;
grid-column-end: 4;
}
.wrap-1 .grid-3 {
grid-column-start: span 2;
grid-column-end: 7;
}
.wrap-2 .grid-3 {
grid-column-start: span 2;
grid-column-end: 6;
}

.wrap-3,
.wrap-4 {
display: grid;
grid-template-columns: 50px;
grid-template-rows: repeat(6, 50px);
}
.wrap-3 .grid-1,
.wrap-4 .grid-1 {
grid-row-start: 1;
grid-row-end: 2;
}
.wrap-3 .grid-2,
.wrap-4 .grid-2 {
grid-row-start: 2;
grid-row-end: 4;
}
.wrap-3 .grid-3 {
grid-row-start: span 2;
grid-row-end: 7;
}
.wrap-4 .grid-3 {
grid-row-start: span 2;
grid-row-end: 6;
}