fr, czyli fraction of available space
grid-template-columns: 1fr 1fr 1fr;
skrótowo:
grid-template-columns: repeat(3, 1fr);
grid-template-columns i grid-template-rows
skrótowo:
grid-template: 1fr 3fr 1fr / 3fr 1fr;

Układ siatki – przykład
Układ siatki z trzema kolumnami po 100px szerokości i sześcioma elementami siatki o szerokości 50px i wysokości 50px:
<div class="hold-0"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
.hold-0 { border: 1px dashed white; width: 400px; height: 200px; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: auto; } .hold-0 .grid { width: 50px; height: 50px; }
1
2
3
4
5
6
.item-1 { background-color: #289FCC; } .item-2 { background-color: #6BC1E2; } .item-3 { background-color: #4BB0D6; } .item-4 { background-color: #078FC2; }
przykład 1
<div class="hold-1"> <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-1 { display: grid; }
item 1
item 2
item 3
item 4
przykład 2
<div class="hold-2"> <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-2 { display: inline-grid; }
item 1
item 2
item 3
item 4
przykład 3
<div class="hold-3"> <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-3 { display: grid; grid-template-columns: auto auto auto auto; }
item 1
item 2
item 3
item 4
przykład 4
<div class="hold-4"> <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-4 { display: inline-grid; grid-template-columns: auto auto auto auto; }
item 1
item 2
item 3
item 4
przykład 5
<div class="hold-5"> <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-5 { display: inline-grid; grid-auto-flow: column; }
item 1
item 2
item 3
item 4
przykład 6
<div class="hold-6"> <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-6 { display: inline-grid; grid-auto-flow: row; }
item 1
item 2
item 3
item 4
przykład 7 – kolejność
<div class="hold-7"> <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-7 { 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-8"> <div class="item item-1">item 1</div> <div class="item item-2">item 2</div> </div>
.hold-8 { 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-9"> <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-9 { display: grid; grid-auto-flow: column; justify-content: space-between; } .hold-9 .grid { width: 150px; }
item 1
item 2
item 3
item 4