Grid „span n”

span n – definiuje liczbę kolumn lub wierszy, które będzie obejmował element

.item-1 { background-color: #289FCC; }
.item-2 { background-color: #6BC1E2; }
.item-3 { background-color: #078FC2; }

grid-column

<div class="hold-1">
	<div class="item item-1">1</div>
	<div class="item item-2">2</div>
	<div class="item item-3">3</div>
</div>
1
2
3
<div class="hold-2">
	<div class="item item-1">1</div>
	<div class="item item-2">2</div>
	<div class="item item-3">3</div>
</div>
1
2
3
.hold-1,
.hold-2 {
	display: grid;
	grid-template-columns: repeat(6, 50px);
	grid-template-rows: 50px;
}
.hold-1 .item-1,
.hold-2 .item-1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
.hold-1 .item-2,
.hold-2 .item-2 {
	grid-column-start: 2;
	grid-column-end: 4;
}
.hold-1 .item-3 {
	grid-column-start: span 2;
	grid-column-end: 7;
}
.hold-2 .item-3 {
	grid-column-start: span 2;
	grid-column-end: 6;
}

grid-row

1
2
3
<div class="hold-3">
	<div class="item item-1">1</div>
	<div class="item item-2">2</div>
	<div class="item item-3">3</div>
</div>
1
2
3
<div class="hold-4">
	<div class="item item-1">1</div>
	<div class="item item-2">2</div>
	<div class="item item-3">3</div>
</div>
.hold-3,
.hold-4 {
	display: grid;
	grid-template-columns: 50px;
	grid-template-rows: repeat(6, 50px);
}
.hold-3 .item-1,
.hold-4 .item-1 {
	grid-row-start: 1;
	grid-row-end: 2;
}
.hold-3 .item-2,
.hold-4 .item-2 {
	grid-row-start: 2;
	grid-row-end: 4;
}
.hold-3 .item-3 {
	grid-row-start: span 2;
	grid-row-end: 7;
}
.hold-4 .item-3 {
	grid-row-start: span 2;
	grid-row-end: 6;
}