白骑士的CSS教学语法基础篇之布局 2.5.4 Grid布局

系列目录​​​​​​​

上一篇：白骑士的CSS教学语法基础篇之布局 2.5.3 Flexbox布局

        Grid 布局是 CSS3 中引入的一种强大的二维布局模型，用于创建复杂的网页布局。与 Flexbox 布局主要用于一维布局不同，Grid 布局允许在两个维度（行和列）上同时进行布局控制，使其能够处理更复杂的布局结构。Grid 布局包括两个主要部分：Grid 容器（Grid Container）和 Grid 项目（Grid Items）。下面，我们将详细介绍 Grid 布局的基本概念、容器属性和单元格属性。

Grid布局的基本概念

        Grid 布局的核心思想是将容器分成一个网格系统，允许开发者在网格的行和列中定位和对齐项目。这种布局方法特别适合用于处理复杂的页面结构，如报纸布局、网格布局等。

        网格线和网格单元：

• 网格线：在行和列之间的线条，用于确定项目的起始和结束位置。
• 网格单元：网格线所围成的区域，可以将项目放置在这些区域内。

        网格区域：

• 网格区域：由多个网格单元组成的区域，可以跨越多个行和列。

Grid容器属性

‘display: grid;‘

        将容器设为 Grid 容器，使其子元素成为 Grid 项目。

        示例：

.container {
  display: grid;
}

‘grid-template-columns‘ 和 ‘grid-template-rows‘

        定义网格的列和行。可以指定固定大小、百分比或自动填充。

• ‘grid-template-columns‘：定义列的宽度。
• ‘grid-template-rows‘：定义行的高度。

        示例：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列，比例为 1:2:1 */
  grid-template-rows: 100px auto 200px; /* 三行，分别为 100px、自动高度和 200px */
}

‘grid-template-areas‘

        允许通过命名区域来定义网格布局。每个区域由项目名称定义，区域之间用空格分隔。

        示例：

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content main"
    "footer footer footer";
}

‘grid-area‘

        指定 Grid 项目占据的区域，可以通过区域名称或网格线编号来设置。

        示例：

.header {
  grid-area: header; /* 使用 grid-template-areas 定义的区域名称 */
}

.main {
  grid-area: 2 / 2 / 3 / 4; /* 使用网格线编号 */
}

‘grid-gap‘（或 ‘gap‘）

        设置网格单元之间的间距，包括行间距和列间距。

        示例：

.container {
  display: grid;
  grid-gap: 10px; /* 行和列的间距为 10px */
}

‘justify-items‘ 和 ‘align-items‘

        定义 Grid 项目在单元格内的对齐方式。

• ‘justify-items‘：控制项目在列方向上的对齐。
• ‘align-items‘：控制项目在行方向上的对齐。

        示例：

.container {
  display: grid;
  justify-items: center; /* 项目在列方向上居中对齐 */
  align-items: end; /* 项目在行方向上靠底部对齐 */
}

‘justify-content‘ 和 ‘align-content‘

        定义网格在容器内的对齐方式。

• ‘justify-content‘：控制整个网格在容器的列方向上的对齐。
• ‘align-content‘：控制整个网格在容器的行方向上的对齐。

        示例：

.container {
  display: grid;
  justify-content: space-between; /* 网格在列方向上分布，项目之间间距相等 */
  align-content: center; /* 网格在行方向上居中对齐 */
}

‘grid-auto-rows‘ 和 ‘grid-auto-columns‘

        定义未被显式设置的行和列的默认大小。

        示例：

.container {
  display: grid;
  grid-auto-rows: minmax(100px, auto); /* 未设置的行大小在 100px 到自动高度之间变化 */
}

‘grid-auto-flow‘

        控制 Grid 项目的自动放置顺序。

• ‘row‘（默认）：项目按行放置。
• ‘column‘：项目按列放置。
• ‘dense‘：项目放置时填补空白区域。

        示例：

.container {
  display: grid;
  grid-auto-flow: dense; /* 自动填补空白区域 */
}

Grid单元格属性

‘grid-column‘ 和 ‘grid-row‘

        定义 Grid 项目跨越的列和行。可以指定起始和结束位置，也可以使用简写形式。

• ‘grid-column‘：指定项目在列方向上的位置。
• ‘grid-row‘：指定项目在行方向上的位置。

        示例：

.item {
  grid-column: 1 / 3; /* 项目从第 1 列到第 3 列 */
  grid-row: 2 / 4; /* 项目从第 2 行到第 4 行 */
}

‘grid-column-start‘、‘grid-column-end‘、‘grid-row-start‘ 和 ‘grid-row-end‘

        定义 Grid 项目在列和行方向上的起始和结束位置。可用于更细粒度的控制。

        示例：

.item {
  grid-column-start: 2; /* 从第 2 列开始 */
  grid-column-end: 4; /* 到第 4 列结束 */
  grid-row-start: 1; /* 从第 1 行开始 */
  grid-row-end: 3; /* 到第 3 行结束 */
}

‘grid-column‘ 和 ‘grid-row‘ 的简写

        ‘grid-column‘ 和 ‘grid-row‘ 可以使用简写形式同时设置起始和结束位置。

        示例：

.item {
  grid-column: 1 / 3; /* 从第 1 列开始，到第 3 列结束 */
  grid-row: 2 / 4; /* 从第 2 行开始，到第 4 行结束 */
}

‘grid-area‘

        将项目放置在定义的区域内。可以同时指定项目的起始和结束位置，也可以使用区域名称。

        示例：

.item {
  grid-area: 1 / 1 / 3 / 4; /* 从第 1 行第 1 列到第 3 行第 4 列 */
}

总结

        Grid 布局提供了一种强大而灵活的方式来处理复杂的网页布局问题。通过理解 Grid 容器和单元格的各种属性，你可以轻松地创建具有高度结构化的布局，满足各种设计需求。无论是简单的网格布局还是复杂的多区域布局，Grid 布局都能有效地解决传统布局方法中的许多难题。掌握 Grid 布局，将为你的网页设计和开发带来极大的便利。

下一篇：白骑士的CSS教学进阶篇之变形与过渡 3.1.1 变形​​​​​​​