CSS Grid 是CSS3中的一个新特性，它提供了一种灵活和强大的网格布局方式，能够完全改变我们以前使用CSS来布局的方法。相比 Flexbox 和传统的 table 布局，CSS Grid 能够更简便地实现复杂的页面布局。本文将会讲解如何使用 CSS Grid 实现网格布局，包括网格的设置和布局、单元格大小的设置和命名网格区域等。
什么是CSS Grid？
CSS Grid 是一个二维网格系统，可以为网页的二维布局提供强大控制力，将元素按需要的方式排列成网格。这些元素的大小和位置都可以使用划分的网格单位来控制。
基本概念
在使用CSS Grid之前，我们需要理解一些基本概念，以便能够更有效地设置网格。CSS Grid 有两个重要的概念：网格容器和网格单元。
网格容器
网格容器指的是一个使用CSS Grid布局的元素，它包含了一系列网格信息。需要使用display: grid;来将一个元素变成网格容器：
.container {
display: grid;
}网格单元
网格单元是网格容器中的一个元素，可以占据网格中的一个单元格，也可以占据多个单元格。对于网格单元，需要使用grid-row和grid-column来指定它所占的行和列：
.item {
grid-row: 2 / 4;
grid-column: 1 / 3;
}上面的代码指定了.item元素占据了第2行到第4行、第1列到第3列的网格。
网格线
网格线用于划分网格容器的行和列，每个网格单元所占据的行和列都由网格线决定。可以使用grid-template-rows和grid-template-columns属性来设置网格线：
.container {
display: grid;
grid-template-rows: 100px 200px 300px;
grid-template-columns: 1fr 2fr 1fr;
}上面的代码指定了网格容器有三行和三列，第一行高度为100像素，第二行高度为200像素，第三行高度为300像素，第一列和第三列的宽度分别为网格容器宽度的1/4，第二列的宽度为网格容器宽度的一半。
网格区域
网格区域是指由四个网格线所包含的网格区域。可以使用grid-template-areas来给整个网格布局设定一个名称，用于设置网格区域：
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 100px 1fr 100px;
}上面的代码将整个网格布局分为三个行和三个列，左边列和右边列的宽度为100像素，中间列占据了网格容器宽度的一半。第一行被命名为header，第二行被命名为sidebar和content，第三行被命名为footer。
命名网格区域
在网格布局中，命名网格区域是一种非常有用的设置方式。通过命名网格区域，我们可以快速地布局复杂的页面，而不用担心行和列的编号变化。网格区域由网格容器中的行和列组成，可以使用grid-template-areas属性来为网格区域命名。
-- -------------------- ---- -------
---------- -
-------- -----
------------------- --------- -------
---------------------- --------- -------
--------------------
------- ------ ------ -------
----- ---- ------- --------
----- ---- ------- --------
------- ------ ------ --------
-
------- -
---------- -------
-
-------- -
---------- --------
-
----- -
---------- -----
-
------- -
---------- -------
-上面的代码通过grid-template-areas为网格区域命名，.header、.sidebar、.main和.footer为不同区域定义了网格样式，从而实现了一个典型的四栏布局。
示例代码
下面是一个简单的使用CSS Grid实现网格布局的例子：
-- -------------------- ---- ------- ---- ------------------ ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- ----------------- ------ ------- ---------- - -------- ----- ---------------------- --------- ----- --------- ----- ----------------- ----- ------ ----- - ----- - ----------------- ----- ------ ----- -------- ----- ---------- ----- ----------- ------- - ------- - ------------ - - -- --------- - - -- - --------
上面的代码实现了一个简单的网格布局，用10个不同的网格单元填充了整个容器，其中第5个单元格占据了第二行到第四行、第二列到第四列。这个例子中使用了grid-template-columns指定了每一列的宽度，使用了grid-gap设置了单元格之间的间距，同时为所有单元格设置了相同的背景颜色和字体颜色，通过对一个单元格的样式进行修改，也演示了单元格样式的更改。
总结
CSS Grid 提供了一种全新的方式来进行网格布局，开发人员可以凭借在网格容器和网格单元、网格线、网格区域上的知识，以及对列数量和单元的大小进行设置来实现更加复杂的布局，同时可以避免使用 table 布局带来的问题。学习使用CSS Grid，你可以构建出更复杂、更优雅的网站布局，同时提高你对前端开发的水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648450eb48841e989436ae67