Grid podstawy
Moduł CSS Grid Layout Module oferuje system układu oparty na siatce, z wierszami i kolumnami, co ułatwia projektowanie stron internetowych bez konieczności używania float i pozycjonowania.

przykład 1
<div class="hold"> <div class="item-1">item 1</div> <div class="item-2">item 2</div> <div class="item-3">item 3</div> <div class="item-4">item 4</div> </div>
.hold { display: grid; }
item 1
item 2
item 3
item 4
przykład 2
<div class="hold"> <div class="item-1">item 1</div> <div class="item-2">item 2</div> <div class="item-3">item 3</div> <div class="item-4">item 4</div> </div>
.hold { display: inline-grid; }
item 1
item 2
item 3
item 4
przykład 3
<div class="hold"> <div class="item-1">item 1</div> <div class="item-2">item 2</div> <div class="item-3">item 3</div> <div class="item-4">item 4</div> </div>
.hold { display: grid; grid-template-columns: auto auto auto auto; }
item 1
item 2
item 3
item 4
przykład 4
<div class="hold"> <div class="item-1">item 1</div> <div class="item-2">item 2</div> <div class="item-3">item 3</div> <div class="item-4">item 4</div> </div>
.hold { display: inline-grid; grid-template-columns: auto auto auto auto; }
item 1
item 2
item 3
item 4
przykład 5
<div class="hold"> <div class="item-1">item 1</div> <div class="item-2">item 2</div> <div class="item-3">item 3</div> <div class="item-4">item 4</div> </div>
.hold { display: inline-grid; grid-auto-flow: column; }
item 1
item 2
item 3
item 4
przykład 6
<div class="hold"> <div class="item-1">item 1</div> <div class="item-2">item 2</div> <div class="item-3">item 3</div> <div class="item-4">item 4</div> </div>
.hold { display: inline-grid; grid-auto-flow: row; }
item 1
item 2
item 3
item 4
przykład 7 – kolejność
<div class="hold"> <div class="item-1">item 1</div> <div class="item-2">item 2</div> <div class="item-3">item 3</div> <div class="item-4">item 4</div> </div>
.hold { display: grid; grid-template-columns: auto auto auto auto; } .item-1:nth-of-type(1) { order: 3; } .item-2:nth-of-type(2) { order: 1; } .item-3:nth-of-type(3) { order: 4; } .item-4:nth-of-type(4) { order: 2; }
item 1
item 2
item 3
item 4
przykład 8
<div class="hold"> <div class="item-1">item 1</div> <div class="item-2">item 2</div> </div>
.hold { display: grid; grid-template-columns: 1fr auto; }
item 1
item 2 – Lorem ipsum dolor sit amet
przykład 9 – bez konieczności podawania ilości kolumn
<div class="hold"> <div class="item item-1">item 1</div> <div class="item item-2">item 2</div> <div class="item item-3">item 3</div> <div class="item item-4">item 4</div> </div>
.hold { display: grid; grid-auto-flow: column; justify-content: space-between; } .hold-9 .item { width: 150px; }
item 1
item 2
item 3
item 4