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