info
Wyrównywanie elementów siatki (wyrównanie do ramki)
justify-items | – wyrównuje elementy siatki wzdłuż osi wiersza (poziomo) – ta wartość dotyczy wszystkich elementów siatki w kontenerze |
align-items | – wyrównuje elementy siatki wzdłuż osi kolumny (pionowo) – ta wartość dotyczy wszystkich elementów siatki w kontenerze |
Wartości:
- auto
- normal
- start
- end
- center
- stretch (domyślne)
- baseline
- first baseline
- last baseline
justify-items
własności wspólne
HTML (od holder13 do holder16) <div class="holder holder1"> <div class="grid">13</div> </div>
CSS .holder { border: 1px dashed white; width: 100%; max-width: 310px; height: 310px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 40px); grid-template-rows: repeat(4, 40px); grid-gap: 10px; }
.holder13 { justify-items: start; }
13
.holder14 { justify-items: end; }
14
.holder15 { justify-items: center; }
15
.holder16 { justify-items: stretch; }
16
align-items
własności wspólne
HTML (od holder17 do holder22) <div class="holder holder17"> <div class="grid">17</div> </div>
CSS .holder { border: 1px dashed white; width: 100%; max-width: 310px; height: 310px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 40px); grid-template-rows: repeat(4, 40px); grid-gap: 10px; }
.holder17 { align-items: start; }
17
.holder18 { align-items: end; }
18
.holder19 { align-items: center; }
19
.holder20 { align-items: stretch; }
20
.holder21 { align-items: baseline; }
21
.grid9-blok .holder22 { justify-items: center; align-items: center; }
22