Wyrównywanie ścieżek siatki
info
Ścieżki siatki można wyrównać względem kontenera siatki wzdłuż osi kolumny i wiersza.
justify-content | wyrównuje ścieżki wzdłuż osi wiersza (poziomo) |
align-content | wyró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
place-content
Właściwość place-content jest używana w układach flexbox i grid i jest właściwością skróconą dla następujących właściwości:
align-content
justify-content
Jeśli właściwość place-content ma dwie wartości:
place-content: start center;
wartość właściwości align-content to ’start’
wartość właściwości justify-content to ’center’
syntax (składnia)
/* Positional alignment */ /* align-content does not take left and right values */ place-content: center start; place-content: start center; place-content: end left; place-content: flex-start center; place-content: flex-end center; /* Baseline alignment */ /* justify-content does not take baseline values */ place-content: baseline center; place-content: first baseline space-evenly; place-content: last baseline right; /* Distributed alignment */ place-content: space-between space-evenly; place-content: space-around space-evenly; place-content: space-evenly stretch; place-content: stretch space-evenly; /* Global values */ place-content: inherit; place-content: initial; place-content: revert; place-content: revert-layer; place-content: unset;
align-content
wspólne własności
HTML (od wrap-1 do wrap-6) <div class="wrap wrap-1"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> </div>
CSS .wrap { border: 1px dashed white; width: 310px; height: 310px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 40px); grid-template-rows: repeat(4, 40px); grid-gap: 10px; }
.wrap-1 { align-content: start; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap-2 { align-content: end; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap-3 { align-content: center; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap-4 { align-content: space-around; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap-5 { align-content: space-between; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap-6 { align-content: space-evenly; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
justify-content
wspólne własności
HTML (od wrap-7 do wrap-12) <div class="wrap wrap-7"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> </div>
CSS .wrap { border: 1px dashed white; width: 310px; height: 310px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 40px); grid-template-rows: repeat(4, 40px); grid-gap: 10px; }
.wrap-7 { justify-content: start; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap-8 { justify-content: end; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap-9 { justify-content: center; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap-10 { justify-content: space-around; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap-11 { justify-content: space-between; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap-12 { justify-content: space-evenly; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16