什么是 CSS Grid 布局？
CSS Grid 布局是一种新的网格布局系统，它可以用于创建复杂的布局，以及更直观和可响应的设计。CSS Grid 具有强大的布局功能，可以实现网格化布局、自适应布局和栅格布局等。
Grid 容器和 Grid 项目
Grid 布局主要由两个部分组成，即 Grid 容器和 Grid 项目。
Grid 容器是一个可以容纳 Grid 项目的区域，它可以使用 display: grid 属性将元素定义为 Grid 容器。每个 Grid 容器都可以定义多个网格线（Grid Line），网格线是划分 Grid 容器区域的线。
Grid 项目指的是 Grid 容器中的子元素，每个 Grid 项目都可以被放置在 Grid 容器中的一个或多个网格单元格（Grid Track）中。
Grid 行和列
Grid 布局中，Grid 容器可以被划分为多个行和列，每个行和列都可以定义一个大小，并且可以根据需要进行自动调整。
要定义网格布局的行和列，可以使用 grid-template-columns 和 grid-template-rows 属性来指定，这些属性可以使用一些关键字、百分比和长度单位，例如：
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
grid-template-rows: 50px 100px;
}上面的代码创建了一个 Grid 容器，其中包含 2 行和 3 列，第一行的高度为 50 像素，第二行的高度为 100 像素，第一列的宽度为 100 像素，第二列的宽度为容器剩余空间的 1/3，第三列的宽度为容器剩余空间的 2/3。
Grid 网格线
在 Grid 布局中，网格线是划分 Grid 容器区域的线，它可以被分为垂直和水平网格线，每个网格线都有一个编号。
要定义 Grid 容器的网格线，可以使用 grid-template-columns 和 grid-template-rows 属性，例如：
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
grid-template-rows: 50px 100px;
}上面的代码创建了一个 Grid 容器，其中包含 2 行和 3 列，第一行的高度为 50 像素，第二行的高度为 100 像素，第一列的宽度为 100 像素，第二列的宽度为容器剩余空间的 1/3，第三列的宽度为容器剩余空间的 2/3。
Grid 单元格
在 Grid 布局中，单元格是 Grid 容器中的一个矩形区域，可以将 Grid 项目放置到单元格中。
要定义 Grid 单元格，可以使用 grid-column 和 grid-row 属性，例如：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- --- ---- ------------------- ---- ------ - ----- - ------------ - - -- -- ---- - - - - -- --------- - - -- -- ---- - - - - -- -
上面的代码创建了一个 Grid 容器和一个 Grid 项目，grid-column 属性将项目放置在第 2 列到第 4 列，grid-row 属性将项目放置在第 1 行到第 2 行。
Grid 自适应布局
在 Grid 布局中，可以使用 auto-fill 和 auto-fit 属性来实现自适应布局。这两个属性可以根据容器大小自动调整单元格大小和数量。
要使用自适应布局，可以将 grid-template-columns 或 grid-template-rows 属性设置为 repeat()、minmax() 和自适应属性 auto-fill 或 auto-fit，例如：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}上面的代码将 Grid 容器设置为自适应布局，每个单元格的最小宽度为 200 像素，最大宽度为容器剩余空间的 1/3。
示例代码
下面是一些使用 Grid 布局的示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ----- ------ --------- ----- - ----- - ----------------- ----- ------ ----- ---------- ----- -------- ----- ---------------- ------- ------------ ------- - ------ - ------------ - - -- --------- - - -- - ------ - ------------ - - -- --------- - - -- - ------ - ------------ - - -- --------- - - -- - ------ - ------------ - - -- --------- - - -- - ------ - ------------ - - -- --------- - - -- - ------ - ------------ - - -- --------- - - -- - ------ - ------------ - - -- --------- - - -- - ------ - ------------ - - -- --------- - - -- - ------ - ------------ - - -- --------- - - -- -
上面的代码创建了一个 Grid 容器和 9 个 Grid 项目，其中使用了 grid-template-columns 和 grid-template-rows 属性来定义网格行和列，使用了 grid-column 和 grid-row 属性来定义 Grid 项目的位置，使用了 grid-gap 属性来定义网格单元格之间的间隔。
总结
CSS Grid 布局是一种新的网格布局系统，它可以用于创建复杂的布局，以及更直观和可响应的设计。要实现 Grid 布局，需要了解 Grid 容器、Grid 项目、Grid 行和列、Grid 网格线和 Grid 自适应布局等概念，并且需要学会使用相关属性和示例代码。掌握了这些知识，就可以使用 CSS Grid 布局创建出更加美观和灵活的网页设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645613ca968c7c53b095a5c0