Home

CSS Grid Justification 与 Alignment

案例模板

justify-items

justify-items: start/end/center

.container {
  /* ... */
  justify-items: center;
}

justify-items: center

align-items

align-items: start/end/center

.container {
  /* ... */
  align-items: center;
}

align-items: center

justify-self

<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

<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-content和align-content用以下模板来展示。

justify-content

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

.container {
  /* ... */
  justify-content: center;
}

justify-content: center

align-content

.container {
  /* ... */
  align-content: center;
}

align-content: center

Change log