Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Grid

Wyrównywanie ścieżek siatki

kodzik

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

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

linki