Wyrównywanie elementów siatki

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