CSS 中最强大的布局方式 —— Grid 布局（下）

前端

2023-10-17 06:11:11

网格排版顺序

在第一部分中，我们讨论了网格单元的排布顺序。在这一部分中，我们将探讨控制整个容器区域内网格区域排布顺序的属性。

grid-auto-flow: 此属性定义了网格单元在容器区域内填充的方式。它可以取以下值：
- row：从左到右填充行。
- column：从上到下填充列。
- dense：自动填充单元，跳过未定义的单元。
- row dense：从左到右按行填充单元，跳过未定义的单元。
- column dense：从上到下按列填充单元，跳过未定义的单元。
grid-auto-columns: 此属性定义了未明确指定宽度的列的默认宽度。它可以是以下格式的长度值或百分比值：
- grid-auto-columns: 100px
- grid-auto-columns: 25%
grid-auto-rows: 此属性与 grid-auto-columns 类似，用于定义未明确指定高度的行。

网格单元对齐

除了控制网格区域的排布顺序之外，CSS Grid 布局还提供了对网格单元内元素进行对齐的能力。

justify-content: 此属性定义了网格单元内元素在水平方向上的对齐方式。它可以取以下值：
- start：将元素对齐到单元的开始。
- end：将元素对齐到单元的结束。
- center：将元素居中对齐。
- space-around：在元素周围创建相等的空间。
- space-between：在元素之间创建相等的空间。
align-content: 此属性定义了网格单元内元素在垂直方向上的对齐方式。它可以取与 justify-content 相同的值。
justify-items: 此属性定义了单个网格单元内元素的水平对齐方式。它可以取与 justify-content 相同的值。
align-items: 此属性定义了单个网格单元内元素的垂直对齐方式。它可以取与 align-content 相同的值。

示例

以下示例展示了如何使用 Grid 布局来创建具有复杂排版和对齐方式的布局：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}

.item {
  background-color: lightblue;
  padding: 20px;
  justify-content: center;
  align-items: center;
}

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.item2 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}

.item3 {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
}

.item4 {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}