CSS Grid 是一种全新的布局方式，它可以让我们更加灵活地控制网页布局。本文将介绍 CSS Grid 的理论知识和实践技巧，帮助读者更好地理解和应用 CSS Grid。
理论知识
Grid 容器和 Grid 项目
CSS Grid 布局是基于 Grid 容器和 Grid 项目的。Grid 容器是一个包含 Grid 项目的容器，它定义了网格布局的行和列。Grid 项目是 Grid 容器中的一个元素，它被放置在网格中。
行和列
Grid 容器中的行和列是由网格线组成的。网格线可以是垂直的或水平的，它们定义了网格布局的行和列。每个行和列都有一个起始和结束位置，它们用于定义网格项目的位置。
网格轨道
网格轨道是网格线之间的空间。它们可以是行轨道或列轨道。行轨道是水平的，列轨道是垂直的。网格项目可以被放置在网格轨道上。
网格单元格
网格单元格是由四个相邻的网格线围成的空间。它是网格布局的基本单位，每个网格项目都占据一个或多个网格单元格。
网格区域
网格区域是由一个或多个网格单元格组成的矩形区域。每个网格项目都可以占据一个或多个网格区域。
网格模板
网格模板是 Grid 容器的布局模板。它定义了网格布局的行和列，以及网格项目的位置和大小。网格模板可以使用 repeat() 函数来定义重复的行或列。
实践技巧
创建 Grid 容器
要创建一个 Grid 容器，我们需要在父元素上设置 display: grid; 属性。这将把父元素转换为 Grid 容器。
.container {
display: grid;
}定义行和列
要定义网格布局的行和列，我们可以使用 grid-template-rows 和 grid-template-columns 属性。这些属性可以使用长度、百分比、auto 和 fr 单位来定义。
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr 1fr;
}放置网格项目
要放置网格项目，我们可以使用 grid-row 和 grid-column 属性。这些属性可以用于指定网格项目的起始和结束位置。
.item {
grid-row: 1 / 3;
grid-column: 2 / 4;
}自适应网格项目
要创建自适应的网格项目，我们可以使用 grid-template-rows 和 grid-template-columns 属性中的 auto 关键字。这将使网格项目自动适应网格容器的大小。
.container {
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
}响应式网格布局
要创建响应式的网格布局，我们可以使用媒体查询来改变网格模板。这将允许我们在不同的设备上使用不同的网格布局。
@media screen and (max-width: 768px) {
.container {
grid-template-rows: auto;
grid-template-columns: auto;
}
}示例代码
下面是一个使用 CSS Grid 创建网格布局的示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------ ------- ---------- - -------- ----- ------------------- --------- ------- ---------------------- --------- ----- --------- ----- - ----- - ----------------- ----- -------- ----- ----------- ------- - --------
上面的代码将创建一个包含 9 个网格项目的网格布局。每个网格项目都占据一个网格单元格，并使用 repeat() 函数定义了重复的行和列。网格之间的间隔使用 grid-gap 属性定义。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da5f88a941bf7134250566