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