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