CSS Grid 是一种新的网格布局系统，可以更加灵活、高效地进行页面布局。在接下来的文章中，我们将一起学习 CSS Grid 的基本概念和用法，并结合实际案例进行演示。
什么是 CSS Grid？
CSS Grid 是一种二维网格布局系统，可以在水平和竖直方向上同时定义网格线，并将内容放置到网格中。它的最大优势是不需要使用额外的 HTML 结构或者 JavaScript，就可以实现复杂的布局效果。
如何使用 CSS Grid？
首先，在使用 CSS Grid 之前，我们需要定义一个网格容器，用来包含所有的子元素。我们可以使用 display: grid; 属性来定义一个网格容器：
.container {
display: grid;
}接下来，我们需要定义网格的行和列。我们可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列：
.container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* 定义 3 行，每行 1 份 */
grid-template-columns: repeat(2, 1fr); /* 定义 2 列，每列 1 份 */
}在上面的例子中，我们定义了一个 3 行 2 列的网格容器，每行和每列的宽度和高度都是相等的。
接下来，我们需要将所有的子元素放置到网格中。我们可以使用 grid-row 和 grid-column 属性来指定子元素所占用的行和列：
-- -------------------- ---- ------- ------- - --------- - - -- -- ----- --- - -- ------------ - - -- -- ----- --- - -- - ------- - --------- - - -- -- ----- --- - -- ------------ - - -- -- ----- --- - -- - ------- - --------- - - -- -- ----- - - -- ------------ - - -- -- ----- - - -- - ------- - --------- - - -- -- ----- - - -- ------------ - - -- -- ----- --- - -- -
在上面的例子中，我们分别定义了 4 个子元素的行和列。注意，grid-row 和 grid-column 属性的值必须是从哪一行开始到哪一行结束或者从哪一列开始到哪一列结束的数字/关键字组合。例如，1/3 表示从第一行开始，到第三行结束。
实战演练
在实际项目中，我们通常会使用 CSS Grid 来进行页面布局。下面，我们将结合一个实际案例来演示如何使用 CSS Grid 进行页面布局。
案例背景
我们的目标是创建一个类似于购物网站首页的布局。页面包含一个上部的导航栏和一个下部的商品列表。导航栏包含一个品牌标识和一些链接，商品列表包含一些商品的缩略图和名称。
页面布局
首先，我们可以将整个页面分为两个区域：导航栏和商品列表。导航栏占据页面的上部，商品列表占据页面的下部。
我们可以使用 grid-template-rows 属性来定义这两个区域：
body {
display: grid;
grid-template-rows: 80px auto; /* 上部导航栏 80 像素高，下部自适应高度 */
}接下来，我们可以将导航栏分为两个部分：品牌标识和链接。品牌标识占据左侧，宽度是 200 像素；链接占据右侧，宽度可以自适应。
我们可以使用 grid-template-columns 属性来定义品牌标识宽度和链接宽度：
nav {
display: grid;
grid-template-columns: 200px auto; /* 左侧品牌标识 200 像素宽，右侧自适应宽 */
}接下来，我们可以将商品列表分为多列，每列显示一个商品的缩略图和名称，缩略图位于名称上方。
我们可以使用 grid-template-columns 属性来定义每列的宽度：
section {
display: grid;
grid-template-columns: repeat(4, 1fr);
}网格布局
现在，我们可以将所有的 HTML 元素放置到网格中，以完成页面布局。完整的 HTML 和 CSS 代码如下：
-- -------------------- ---- -------
------
-----
-------------
----
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
------
---------
---- -------------
---- ---------------- --------- ---
-------- ------
------
---- -------------
---- ---------------- --------- ---
-------- ------
------
---- -------------
---- ---------------- --------- ---
-------- ------
------
---
----------
-------
-------
---- -
-------- -----
------------------- ---- -----
-
--- -
-------- -----
---------------------- ----- -----
------------ ------- -- ---- --
-------- - ----- -- ---- --
-
-- -
------- --
-
-- -
----------- -----
------- --
-------- -----
---------------- --------- -- --- --
-
-- -
------------ -----
-
------- -
-------- -----
---------------------- --------- -----
---- ----- -- ---- --
-------- -----
-
----- -
----------- -------
-
--- -
------ -----
------- -----
-
-- -
----------- -----
-------------- --
-
--------在上面的代码中，我们定义了一个网格容器 body，包含了导航栏和商品列表两个子元素。导航栏又包含了品牌标识和链接两个子元素。商品列表使用了 repeat() 函数来定义了 4 列。每个商品又分为缩略图和名称两个子元素，并使用 text-align: center; 属性来使其垂直居中。
最终，我们得到了一个类似如下的页面布局：
总结
CSS Grid 是一种新的网格布局系统，可以更加灵活、高效地进行页面布局。我们可以使用 display: grid; 属性来定义一个网格容器，并使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列。最后，我们可以使用 grid-row 和 grid-column 属性来将所有的子元素放置到网格中。
在实际项目中，我们通过一个案例演示了如何使用 CSS Grid 进行页面布局。通过演示，我们可以清楚地看到 CSS Grid 的优势和用法，希望本文能对你有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484233e48841e989434cdda