在网站开发中，布局是一个至关重要的部分。而想要实现复杂的布局常常需要使用到多种 CSS 属性与技巧。而 CSS Grid 则是一个非常强大的工具，它可以有效地帮助我们实现复杂布局，同时提高页面的可维护性与可扩展性。
什么是 CSS Grid？
CSS Grid 是一种二维的网格布局系统，可以将一个网页划分为多个网格，然后按照我们的需求把元素放到这些网格中。相比其他的布局系统，CSS Grid 更为灵活，可以轻松地实现多种不同的布局方案，包括一些比较复杂的网格布局。
如何使用 CSS Grid？
在使用 CSS Grid 之前，需要先了解一些基本的概念与属性。
容器和项目
在 CSS Grid 中，我们通常将元素分为两类：容器和项目。容器是一个网格布局中的最外层元素，它的作用是将所有的项目放置在它内部的网格中。而项目则是容器内部的元素，它们可以被放置在不同的网格中。
网格线与网格轨道
在 CSS Grid 中，每个网格都由两条线构成，我们称它们为网格线。这些网格线可以是水平方向的，也可以是垂直方向的。而网格线之间的空间则被称为网格轨道。我们可以通过设置网格线与轨道的数量与位置来定义网格的结构。
grid-template-columns 和 grid-template-rows
在 CSS Grid 中，我们通常使用 grid-template-columns 和 grid-template-rows 这两个属性来设置网格的大小与位置。这两个属性分别用于设置水平方向和垂直方向上的网格轨道。
我们可以使用 px，em 或百分比等单位来设置每个网格轨道的大小。还可以使用 repeat() 函数来重复定义相同大小的轨道。
grid-column 和 grid-row
在设置项目的位置时，我们可以使用 grid-column 和 grid-row 这两个属性来指定它们所在的网格。这两个属性都接受一个值或一个值对。其中，值对用于指定项目跨越的网格数量。例如，grid-column: 1 / 3; 表示项目跨越从第一列到第三列的网格。
我们还可以使用 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 这四个属性来更加精细地控制项目的位置。这四个属性分别表示项目的起始列、结束列、起始行和结束行。例如，grid-column-start: 1; 表示项目从第一列开始。
grid-column-gap 和 grid-row-gap
在 CSS Grid 中，我们还可以使用 grid-column-gap 和 grid-row-gap 这两个属性来设置网格线之间的间隔。
实战案例
下面，我们将通过一个实战案例来演示如何使用 CSS Grid 实现复杂布局。
代码结构
<div class="container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="content">Content</div> <div class="footer">Footer</div> </div>
样式设置
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- ----- -----
------------------- ----- ---- -----
---------------- -----
------------- -----
--------------------
------- -------
-------- --------
------- --------
-
------- -
---------- -------
----------------- -----
-
-------- -
---------- --------
----------------- -----
-
-------- -
---------- --------
----------------- -----
-
------- -
---------- -------
----------------- -----
-首先，我们在容器中设置了网格布局，并使用 grid-template-columns 和 grid-template-rows 属性来定义了网格的结构。我们将第一列设置为 200px 的宽度，第二列则自适应宽度。此外，我们还定义了三个行，分别是 100px、自适应高度和 50px 的高度。我们使用 grid-template-areas 属性来定义了每个项目所在的网格。
接下来，我们为每个项目设置样式。我们使用 grid-area 属性来指定项目所在的网格，然后为它们设置了一个背景颜色。此外，我们还使用了 grid-column-gap 和 grid-row-gap 属性来设置网格线之间的间隔。
最后，我们的网页效果如下。
总结
CSS Grid 是一个非常强大的工具，可以用来实现复杂的网格布局。在使用 CSS Grid 时，有一些基本的概念与属性需要掌握，例如容器与项目、网格线与网格轨道、grid-template-columns 和 grid-template-rows、grid-column 和 grid-row 等。当我们掌握了这些基本概念之后，我们就可以灵活地布置页面中的各个元素，实现各种复杂的布局方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7ef1048841e989448fb75