CSS Grid 布局详解：从入门到精通

CSS Grid 布局（也称为“网格”布局）是一种强大的二维布局系统，它可以让你轻松地创建复杂且响应式的网页布局。与 Flexbox（主要用于一维布局）不同，Grid 布局同时处理行和列，提供了前所未有的布局控制能力。本文将带你深入了解 Grid 布局的各个方面，从基本概念到高级技巧，助你成为 Grid 布局专家。

一、Grid 布局基础

1.1 什么是 Grid 布局？

Grid 布局是一种基于网格的布局系统，它将一个容器划分为行和列，形成一个个单元格（Grid Cell），然后通过指定项目（Grid Item）所在的行和列来控制其位置和大小。

1.2 核心概念

• 网格容器（Grid Container）: 应用 display: grid 或 display: inline-grid 的元素。它是所有网格项的父元素。
• 网格项（Grid Item）: 网格容器的直接子元素。
• 网格线（Grid Line）: 划分网格的水平线和垂直线。它们用于定位网格项。
• 网格轨道（Grid Track）: 两条相邻网格线之间的空间，可以是行或列。
• 网格单元格（Grid Cell）: 由相邻的行网格线和列网格线定义的空间，是 Grid 布局的最小单位。
• 网格区域（Grid Area）: 由一个或多个网格单元格组成的矩形区域。

1.3 开启 Grid 布局

要开始使用 Grid 布局，只需在父元素上设置 display: grid 或 display: inline-grid：

css
.container {
display: grid; /* 或 display: inline-grid */
}

display: grid 将容器变为块级网格容器，而 display: inline-grid 将容器变为行内级网格容器。

二、定义网格

2.1 grid-template-columns 和 grid-template-rows

这两个属性用于定义网格的列和行。你可以使用各种单位（如 px、%、em、fr 等）来指定轨道的大小。

• grid-template-columns: 定义网格的列数和每列的宽度。
• grid-template-rows: 定义网格的行数和每行的高度。

css
.container {
grid-template-columns: 100px 100px 100px; /* 三列，每列 100px 宽 */
grid-template-rows: 50px 50px; /* 两行，每行 50px 高 */
}

fr 单位: fr 是一个分数单位，表示可用空间的一部分。它允许你按比例分配轨道大小。

css
.container {
grid-template-columns: 1fr 2fr 1fr; /* 三列，比例为 1:2:1 */
grid-template-rows: 1fr 1fr; /* 两行，高度相等 */
}

repeat() 函数: repeat() 函数用于简化重复值的定义。

css
.container {
grid-template-columns: repeat(3, 100px); /* 等同于 100px 100px 100px */
grid-template-rows: repeat(2, 1fr); /* 等同于 1fr 1fr */
}
auto关键字: 如果你希望某个列的宽度是auto, 那么这一列的宽度取决于列中内容的宽度

minmax() 函数: minmax() 函数定义了一个大小范围，允许你设置轨道的最小和最大尺寸。

css
.container {
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 每列最小 100px，最大 1fr */
}
auto-fill和auto-fit: auto-fill 和 auto-fit 关键字通常与 repeat() 函数一起使用，用于创建自适应数量的轨道。
css
.container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 当容器宽度足够时，尽可能多地创建至少 200px 宽的列 */
}
auto-fill 会尽可能多地创建轨道，即使这些轨道是空的。而auto-fit 会自动折叠空的轨道，将可用空间分配给有内容的轨道。

2.2 grid-template-areas

grid-template-areas 属性提供了一种直观的方式来定义网格区域，并通过名称引用它们。

“`css
.container {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
“header header header”
“sidebar main main”
“footer footer footer”;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
“`

在这个例子中，我们定义了四个区域：header、sidebar、main 和 footer。然后，通过将网格项的 grid-area 属性设置为相应的区域名称，将它们放置到对应的区域中。

注意:
* 每个区域名称都代表一个单元格。
* 使用 . 表示一个空的单元格。
* 同一区域名称跨越多行或多列会合并成一个矩形区域。

2.3 grid-gap (或 gap)

grid-gap 属性（或简写属性 gap）用于设置行与行之间、列与列之间的间距。

css
.container {
grid-gap: 20px; /* 行间距和列间距都为 20px */
/* 或 */
gap: 20px;
/* 也可以分别设置 */
grid-row-gap: 10px; /* 行间距 */
grid-column-gap: 30px; /* 列间距 */
/* 或 */
row-gap:10px;
column-gap:30px;
}

三、定位网格项

3.1 基于网格线的定位

你可以使用 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性，通过指定网格线的起始和结束位置来定位网格项。

css
.item1 {
grid-column-start: 1;
grid-column-end: 3; /* 从第一条列线开始，到第三条列线结束 */
grid-row-start: 1;
grid-row-end: 2; /* 从第一条行线开始，到第二条行线结束 */
}

简写属性:

• grid-column: grid-column-start / grid-column-end
• grid-row: grid-row-start / grid-row-end
• grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end

css
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
/* 或 */
grid-area: 1 / 1 / 2 / 3;
}

span 关键字: span 关键字用于指定跨越的轨道数量。

css
.item1 {
grid-column: 1 / span 2; /* 从第一条列线开始，跨越两列 */
grid-row: 1 / span 1; /* 从第一条行线开始，跨越一行 */
}

3.2 使用 grid-area

如果使用grid-template-areas定义好了区域,可以直接使用grid-area进行快速布局

“`css
.container {
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
grid-template-areas:
“a b c”
“d e f”
“g h i”;
}

.item-a{
grid-area: a;
}
“`

四、对齐

Grid 布局提供了多个属性来控制网格项在行轴和列轴上的对齐方式。

4.1 justify-items 和 align-items

这两个属性用于控制所有网格项在单元格内的对齐方式。

• justify-items: 控制网格项在单元格内的水平（列轴）对齐方式。
  • start: 左对齐
  • end: 右对齐
  • center: 居中对齐
  • stretch: 拉伸以填充单元格（默认值）
• align-items: 控制网格项在单元格内的垂直（行轴）对齐方式。
  • start: 顶部对齐
  • end: 底部对齐
  • center: 居中对齐
  • stretch: 拉伸以填充单元格（默认值）

css
.container {
justify-items: center;
align-items: start;
}

4.2 justify-content 和 align-content

这两个属性用于控制整个网格在容器内的对齐方式（当网格的总大小小于容器时）。

• justify-content: 控制整个网格在容器内的水平（列轴）对齐方式。
  • start: 左对齐
  • end: 右对齐
  • center: 居中对齐
  • stretch: 拉伸轨道以填充容器
  • space-between: 两端对齐，项目之间的间隔相等
  • space-around: 每个项目两侧的间隔相等
  • space-evenly: 项目之间和项目与容器边缘之间的间隔相等
• align-content: 控制整个网格在容器内的垂直（行轴）对齐方式。
  • start: 顶部对齐
  • end: 底部对齐
  • center: 居中对齐
  • stretch: 拉伸轨道以填充容器
  • space-between: 两端对齐，项目之间的间隔相等
  • space-around: 每个项目两侧的间隔相等
  • space-evenly: 项目之间和项目与容器边缘之间的间隔相等

css
.container {
justify-content: space-around;
align-content: center;
}

4.3 justify-self 和 align-self

这两个属性用于控制单个网格项在其单元格内的对齐方式，会覆盖 justify-items 和 align-items 的设置。

• justify-self: 控制单个网格项在单元格内的水平（列轴）对齐方式。
• align-self: 控制单个网格项在单元格内的垂直（行轴）对齐方式。

css
.item1 {
justify-self: end;
align-self: center;
}

五、隐式网格和自动放置

5.1 隐式网格

当你将一个网格项放置在显式定义的网格之外时，Grid 布局会自动创建隐式网格轨道来容纳它。

“`css
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px;
}

.item3 {
grid-column: 3; / 放置在第三列，但我们只定义了两列 /
grid-row: 2; / 放置在第二行，但我们只定义了一行 /
}
“`

在这个例子中，.item3 被放置在了隐式创建的第三列和第二行。

5.2 grid-auto-columns 和 grid-auto-rows

这两个属性用于控制隐式创建的网格轨道的大小。

css
.container {
grid-auto-columns: 80px; /* 隐式创建的列宽为 80px */
grid-auto-rows: 40px; /* 隐式创建的行高为 40px */
}

5.3 grid-auto-flow

grid-auto-flow 属性控制自动放置算法的行为，决定新添加的网格项如何排列。

• row (默认值): 按行优先排列。
• column: 按列优先排列。
• dense: 尝试填充网格中的空隙，可能会改变项目的视觉顺序。

css
.container {
grid-auto-flow: column; /* 新添加的网格项按列排列 */
}

六、Grid 布局与响应式设计

Grid 布局天生就适合响应式设计。你可以结合媒体查询和 Grid 属性来创建适应不同屏幕尺寸的布局。

“`css
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}

@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; / 在小屏幕上改为单列布局 /
}
}
``
利用minmax和auto-fit`可以实现自动根据屏幕大小适配,无需媒体查询

七. 总结

CSS Grid 布局是一个功能强大且灵活的布局工具，它提供了对网页布局的精细控制。通过掌握本文介绍的概念和技巧，你将能够创建各种复杂且响应式的布局，提升你的网页设计水平。记住，Grid 布局的学习曲线可能稍陡，但一旦掌握，你将拥有一个强大的布局利器。