精彩解读 CSS Grid 布局(下)：轻松定义 item 对齐方式和布局方式

Introduction

在上一篇文章中，我们讨论了如何使用 CSS Grid 布局来创建灵活、响应式和现代化的布局。我们了解了如何定义每个 item 的起始轴编号和终止轴编号来定义其宽度或高度。

在本篇文章中，我们将继续讨论 CSS Grid 布局，重点关注如何定义 item 的对齐方式以及布局方式。

Item 对齐方式

CSS Grid 布局提供了多种方式来对齐 item，包括：

• justify-content ：用于对齐 item 在主轴上的位置。
• align-content ：用于对齐 item 在副轴上的位置。
• justify-items ：用于对齐单个 item 在主轴上的位置。
• align-items ：用于对齐单个 item 在副轴上的位置。

justify-content

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
}

align-content

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-content: center;
}

justify-items

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

align-items

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
}

布局方式

CSS Grid 布局还提供了多种布局方式，包括：

• grid-template-columns ：定义 grid 容器的主轴方向上的列布局。
• grid-template-rows ：定义 grid 容器的副轴方向上的行布局。
• grid-gap ：定义 grid 容器中 item 之间的间距。

grid-template-columns

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

grid-template-rows

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

grid-gap

.grid {
  display: grid;
  grid-gap: 10px;
}

Conclusion

通过对 item 对齐方式和布局方式的深入剖析，我们能够更加灵活地控制 grid 容器的布局，充分展现出 CSS Grid 布局的强大功能。这些技巧在实战中无处不在，期待着你不断探索与实践，创造出更加出色的布局效果。