CSS Grid（网格布局）是一种用于构建网页布局的强大工具，它使得前端开发者能够快速创建任意复杂的布局，例如响应式设计和多列布局等。本文将为您介绍 CSS Grid 的基本概念和实例教程。
CSS Grid 基础概念
CSS Grid 基于网格系统实现，将一个网页布局划分成多个网格，并将其中的内容分配到这些网格中。CSS Grid 包括以下基本概念：
容器
CSS Grid 布局的父容器称为网格容器（Grid Container），它基于 display 属性的值来区分。容器的 display 属性值为 grid 时，表示该元素是一个网格容器。
<div class="container"> <!-- 网格内容 --> </div>
.container {
display: grid;
}行和列
我们可以通过属性 grid-template-rows 和 grid-template-columns 来定义网格容器中的行和列。例如，我们可以通过以下样式创建一个包含三行和三列的网格布局：
.container {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
}单元格
CSS Grid 布局中，网格容器中的一个单元格称为网格单元（Grid Cell），它的位置由行和列所确定。
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- ----- ----- ------ - ---------- - --- - -- -- --- ------- -- -
网格线
在 CSS Grid 布局中，行和列之间的虚拟线被称为网格线（Grid Line），我们可以通过属性 grid-template-rows 和 grid-template-columns 来定义这些线。
.container {
display: grid;
grid-template-rows: 100px 100px 100px;
/* 定义两条横向网格线 */
grid-template-columns: 100px 100px 100px;
}网格跨度
网格容器中，我们可以通过属性 grid-column 和 grid-row 来定义网格跨度（Grid Span），使网格单元跨越多行或多列。例如，可以通过以下代码实现跨越两列的网格单元：
.container > div:nth-child(2) {
/* 跨越第二列和第三列 */
grid-column: 2 / 4;
}网格区域
在网格容器中，我们可以通过属性 grid-template-areas 来定义网格区域（Grid Area），这是一个更高级的网格定义方式。以下是一个示例：
-- -------------------- ---- -------
---------- -
-------- -----
--------------------
------- ------ -------
----- ---- --------
----- ------ ---------
-
------- -
---------- -------
-下面是一个实现常见多列布局的 CSS Grid 实例。
HTML 结构
<div class="wrapper"> <header>Header</header> <nav>Navigation</nav> <main>Main Content</main> <aside>Sidebar</aside> <footer>Footer</footer> </div>
CSS 样式
-- -------------------- ---- -------
-------- -
-------- -----
---------------------- --- ----
------------------- ---- --- -----
--------------------
------- -------
---- -----
------- --------
---------------- -----
------------- -----
-
------ -
---------- -------
----------------- --------
-------- -----
-
--- -
---------- ----
----------------- --------
-------- -----
-
---- -
---------- -----
----------------- --------
-------- -----
-
----- -
----------------- --------
-------- -----
-
------ -
---------- -------
----------------- --------
-------- -----
-效果演示
总结
CSS Grid 是一种灵活而强大的工具，能够让我们轻松地创建任意复杂的网页布局。希望本文能够帮助您理解 CSS Grid 布局的基本概念和实战使用技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6454dbb6968c7c53b08992ff