Wyrównywanie ścieżek siatki

info

Ścieżki siatki można wyrównać względem kontenera siatki wzdłuż osi kolumny i wiersza.

justify-contentwyrównuje ścieżki wzdłuż osi wiersza (poziomo)
align-contentwyrównuje ścieżki wzdłuż osi kolumny (pionowo)

Wartości:

  • normal
  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly
  • baseline
  • first baseline
  • last baseline

justify-content

własności wspólne

HTML 
(od hold-1 do hold-6)

<div class="holder hold-1">
	<div class="grid">1</div>
	<div class="grid">2</div>
	<div class="grid">3</div>
	<div class="grid">4</div>
	<div class="grid">5</div>
	<div class="grid">6</div>
	<div class="grid">7</div>
	<div class="grid">8</div>
	<div class="grid">9</div>
	<div class="grid">10</div>
	<div class="grid">11</div>
	<div class="grid">12</div>
	<div class="grid">13</div>
	<div class="grid">14</div>
	<div class="grid">15</div>
	<div class="grid">16</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;
}
.hold-1 {
	justify-content: start;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hold-2 {
	justify-content: end;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hold-3 {
	justify-content: center;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hold-4 {
	justify-content: space-around;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hold-5 {
	justify-content: space-between;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hold-6 {
	justify-content: space-evenly;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

align-content

własności wspólne

HTML 
(od hold-7 do hold-12)

<div class="holder hold-7">
	<div class="grid">1</div>
	<div class="grid">2</div>
	<div class="grid">3</div>
	<div class="grid">4</div>
	<div class="grid">5</div>
	<div class="grid">6</div>
	<div class="grid">7</div>
	<div class="grid">8</div>
	<div class="grid">9</div>
	<div class="grid">10</div>
	<div class="grid">11</div>
	<div class="grid">12</div>
	<div class="grid">13</div>
	<div class="grid">14</div>
	<div class="grid">15</div>
	<div class="grid">16</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;
}
.hold-7 {
	align-content: start;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hold-8 {
	align-content: end;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hold-9 {
	align-content: center;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hold-10 {
	align-content: space-around;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hold-11 {
	align-content: space-between;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hold-12 {
	align-content: space-evenly;	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16