前言
CSS Grid 是一种强大的布局系统，它可以轻松地实现复杂的网格布局。在本文中，我们将深入了解 CSS Grid 的各种特性及使用技巧，并结合实例代码进行讲解。希望本文能够帮助读者更好地掌握 CSS Grid。
CSS Grid 简介
CSS Grid 是一种二维网格布局系统，它能够将页面划分为行和列，并将内容放置在对应的单元格中。与传统的布局方式相比，CSS Grid 具有更高的灵活性和可扩展性。通过 CSS Grid，我们可以轻松地实现复杂的布局，例如多列布局、响应式布局、圣杯布局等。
CSS Grid 基本概念
在学习 CSS Grid 之前，我们需要了解一些基本概念。
网格容器（Grid Container）
网格容器是一个元素，它包含了一个或多个网格项（Grid Item）。网格容器通过设置 display: grid 来声明自己是一个网格容器。
.container { display: grid; }
网格项（Grid Item）
网格项是网格布局中的基本单位，它是网格容器中的一个子元素。网格项可以是任意元素，例如 div、p、img 等。通过设置网格项的属性，我们可以控制它在网格容器中的位置和大小。
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ----------------- ----- -------- ----- ------- --- ----- ----- -展开代码
网格线（Grid Line）
网格线是网格容器中的一条虚拟线，它用于定义网格行或网格列。网格线可以通过设置 grid-template-rows 或 grid-template-columns 来定义。网格线的编号从 1 开始，依次递增。
.container { display: grid; grid-template-rows: 100px 200px 300px; grid-template-columns: 1fr 2fr 1fr; }
在上面的例子中，我们定义了三行和三列。第一行的高度为 100px，第二行的高度为 200px，第三行的高度为 300px。第一列和第三列的宽度都为 1fr，第二列的宽度为 2fr。
网格单元格（Grid Cell）
网格单元格是网格容器中的一个矩形区域，它由相邻的网格线所定义。网格单元格可以是一个网格项，也可以是多个网格项的合并。通过设置 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 属性，我们可以控制网格单元格的位置和大小。
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- - ------ - --------------- -- ------------- -- ------------------ -- ---------------- -- - ------ - --------------- -- ------------- -- ------------------ -- ---------------- -- -展开代码
在上面的例子中，我们定义了一个 3 行 3 列的网格布局。通过设置 item1 的属性，我们将它放置在第 1 行到第 2 行，第 1 列到第 2 列的区域中。通过设置 item2 的属性，我们将它放置在第 2 行到第 3 行，第 2 列到第 3 列的区域中。
CSS Grid 属性详解
grid-template-rows 和 grid-template-columns
grid-template-rows 和 grid-template-columns 用于定义网格行和网格列的大小和数量。它们接受一个由空格分隔的值列表，每个值表示一个网格行或网格列的大小。可以使用长度单位（如 px、em、rem）或百分比来定义大小。还可以使用 fr 单位来定义相对比例，例如 1fr 2fr 1fr 表示第一列和第三列的宽度为第二列的一半。
.container { display: grid; grid-template-rows: 100px 200px 300px; grid-template-columns: 1fr 2fr 1fr; }
在上面的例子中，我们定义了三行和三列。第一行的高度为 100px，第二行的高度为 200px，第三行的高度为 300px。第一列和第三列的宽度都为 1fr，第二列的宽度为 2fr。
grid-row-start、grid-row-end、grid-column-start 和 grid-column-end
grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 用于控制网格项在网格容器中的位置和大小。它们接受一个整数或一个关键字，关键字包括 span、start 和 end。
grid-row-start：网格项的起始行。grid-row-end：网格项的结束行。grid-column-start：网格项的起始列。grid-column-end：网格项的结束列。
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- - ------ - --------------- -- ------------- -- ------------------ -- ---------------- -- - ------ - --------------- -- ------------- -- ------------------ -- ---------------- -- -展开代码
在上面的例子中，我们定义了一个 3 行 3 列的网格布局。通过设置 item1 的属性，我们将它放置在第 1 行到第 2 行，第 1 列到第 2 列的区域中。通过设置 item2 的属性，我们将它放置在第 2 行到第 3 行，第 2 列到第 3 列的区域中。
grid-row 和 grid-column
grid-row 和 grid-column 是 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 的缩写形式。它们接受一个由空格分隔的值列表，每个值表示一个网格行或网格列的起始位置和结束位置。可以使用整数或关键字来定义位置，例如 1 / span 2 表示从第 1 行开始，跨越 2 行。
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- - ------ - --------- - - ---- -- ------------ - - ---- -- - ------ - --------- - - ---- -- ------------ - - ---- -- -展开代码
在上面的例子中，我们使用了 grid-row 和 grid-column 的缩写形式，与之前的例子等价。通过设置 item1 的属性，我们将它放置在第 1 行到第 2 行，第 1 列到第 2 列的区域中。通过设置 item2 的属性，我们将它放置在第 2 行到第 3 行，第 2 列到第 3 列的区域中。
grid-template-areas
grid-template-areas 用于定义网格布局中的区域。它接受一个字符串，字符串中的每个单词表示一个网格单元格。可以使用 . 表示空单元格，使用引号包裹的字符串表示一个命名区域。可以使用 grid-area 属性将网格项放置到对应的区域中。
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- -------------------- ------- ------ ------- -------- ---- ----- -------- ------ -------- - ------- - ---------- ------- - -------- - ---------- -------- - ----- - ---------- ----- - ------- - ---------- ------- -展开代码
在上面的例子中，我们定义了一个 3 行 3 列的网格布局，使用 grid-template-areas 定义了三个区域。通过设置网格项的 grid-area 属性，我们将它们分别放置在对应的区域中。
grid-auto-rows 和 grid-auto-columns
grid-auto-rows 和 grid-auto-columns 用于定义自动创建的网格行和网格列的大小。当一个网格项放置在一个未定义的网格行或网格列上时，网格容器会自动创建一个网格行或网格列，并使用 grid-auto-rows 和 grid-auto-columns 定义的大小。
.container { display: grid; grid-template-rows: 100px 200px 300px; grid-template-columns: 1fr 2fr 1fr; grid-auto-rows: 100px; grid-auto-columns: 100px; }
在上面的例子中，我们定义了三行和三列，以及 grid-auto-rows 和 grid-auto-columns。当一个网格项放置在一个未定义的网格行或网格列上时，网格容器会自动创建一个高度为 100px、宽度为 100px 的网格行或网格列。
grid-auto-flow
grid-auto-flow 用于定义自动创建的网格行和网格列的放置方式。它有两个可选值：row 和 column。默认值为 row。当值为 row 时，网格容器会先自动创建网格行，然后按顺序放置网格项。当值为 column 时，网格容器会先自动创建网格列，然后按顺序放置网格项。
.container { display: grid; grid-template-rows: 100px 200px 300px; grid-template-columns: 1fr 2fr 1fr; grid-auto-rows: 100px; grid-auto-columns: 100px; grid-auto-flow: column; }
在上面的例子中，我们将 grid-auto-flow 设置为 column，网格容器会先自动创建网格列，然后按顺序放置网格项。
justify-items 和 align-items
justify-items 和 align-items 用于定义网格项在网格单元格中的水平对齐方式和垂直对齐方式。它们接受一个关键字，包括 start、end、center、stretch 和 baseline。
.container { display: grid; grid-template-rows: 100px 200px 300px; grid-template-columns: 1fr 2fr 1fr; justify-items: center; align-items: center; }
在上面的例子中，我们将 justify-items 和 align-items 设置为 center，网格项会在网格单元格中居中对齐。
justify-content 和 align-content
justify-content 和 align-content 用于定义网格单元格在网格容器中的水平对齐方式和垂直对齐方式。它们接受一个关键字，包括 start、end、center、stretch 和 space-between 等。
.container { display: grid; grid-template-rows: 100px 200px 300px; grid-template-columns: 1fr 2fr 1fr; justify-content: center; align-content: center; }
在上面的例子中，我们将 justify-content 和 align-content 设置为 center，网格单元格会在网格容器中居中对齐。
justify-self 和 align-self
justify-self 和 align-self 用于定义单个网格项在网格单元格中的水平对齐方式和垂直对齐方式。它们接受一个关键字，包括 start、end、center、stretch 和 baseline。
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- - ------ - ------------- ------- ----------- ------- -展开代码
在上面的例子中，我们将 item1 的 justify-self 和 align-self 设置为 center，它会在网格单元格中居中对齐。
CSS Grid 使用技巧
响应式布局
CSS Grid 可以轻松地实现响应式布局。通过设置不同的网格行和网格列，我们可以在不同的屏幕尺寸下呈现不同的布局。
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- - ------ ----------- ------ - ---------- - ------------------- ----- ----- ------ ---------------------- ---- - -展开代码
在上面的例子中，我们使用了媒体查询，当屏幕宽度小于 768px 时，修改了网格行和网格列的大小和数量，实现了响应式布局。
圣杯布局
圣杯布局是一种常见的多列布局，它包含一个固定宽度的中间列和两个自适应宽度的侧边栏。通过 CSS Grid，我们可以轻松地实现圣杯布局。
<div class="container"> <div class="main">Main Content</div> <div class="left">Left Sidebar</div> <div class="right">Right Sidebar</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ------ ---------------------- --- ----- ---- - ----- - ----------------- ----- - ------ - ----------------- ----- - ----- - ----------------- ----- ------------------ -- ---------------- -- -展开代码
在上面的例子中，我们定义了一个 1 行 3 列的网格布局，通过设置 main 的 grid-column-start 和 grid-column-end 属性，将它放置在中间列。通过设置 left 和 right 的背景色，可以看出它们分别位于左侧和右侧。
自适应网格项
有时候，我们希望网格项的大小可以自适应内容。通过设置 grid-auto-rows 和 grid-auto-columns，我们可以实现自适应网格项。
.container { display: grid; grid-auto-rows: minmax(100px, auto); grid-auto-columns: minmax(100px, auto); }
在上面的例子中，我们将 grid-auto-rows
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678554fa5638eae96002f68d
