Do one thing and do it well.

0%

CSS Grid Justification 与 Alignment

案例模板

See the Pen grid sample by Like Zheng (@Lastingman) on CodePen.

justify-items

justify-items: start/end/center

1
2
3
4
.container {
/* ... */
justify-items: center;
}
justify-items: center

align-items

align-items: start/end/center

1
2
3
4
.container {
/* ... */
align-items: center;
}
 align-items: center

justify-self

1
2
3
4
5
6
7
8
<div class="container">
<div class="item" style="justify-self: center;"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item" style="justify-self: end;"></div>
<div class="item"></div>
<div class="item"></div>
</div>
 justify-self

align-self

1
2
3
4
5
6
7
8
<div class="container">
<div class="item" style="align-self: center;"></div>
<div class="item" style="align-self: end;"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
 align-self

案例模板 2

justify-contentalign-content用以下模板来展示。

See the Pen grid sample 2 by Like Zheng (@Lastingman) on CodePen.

justify-content

justify-content: start/end/center/space-around/space-between/space-evenly

1
2
3
4
.container {
/* ... */
justify-content: center;
}
 justify-content: center

align-content

1
2
3
4
.container {
/* ... */
align-content: center;
}
 align-content: center

Change log

  • 2019-4-9 create