CSS Grid 是一种强大的布局方式，它可以让我们更轻松地创建复杂的布局，并且可以适应各种不同的屏幕尺寸和设备类型。在本文中，我们将介绍 CSS Grid 的常用属性，并提供一些实际应用的示例代码，帮助你更好地掌握这种布局方式。
容器属性
display
display 属性用于定义一个元素作为网格容器。它有两个可选值：grid 和 inline-grid。其中，grid 表示元素将作为一个块级元素出现，而 inline-grid 表示元素将作为一个行内元素出现。
示例代码：
.container {
display: grid;
/* 或者 display: inline-grid; */
}grid-template-columns 和 grid-template-rows
grid-template-columns 和 grid-template-rows 属性用于定义网格的列和行。你可以使用长度单位、百分比、fr 单位（用于分配可用空间的比例）、minmax() 函数（用于定义一个区间范围内的最小和最大值）等来定义列和行的大小。
示例代码：
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}上述代码定义了一个有三列和两行的网格，其中第一列和第三列的宽度都是第二列的一半，第一行的高度是 100 像素，第二行的高度是 200 像素。
grid-template-areas
grid-template-areas 属性用于定义网格区域，它可以让你更直观地定义网格的布局。你可以通过给每个网格单元格分配一个名称来定义网格区域，然后将这些名称组合成一个字符串来定义整个网格。
示例代码：
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --- --- ----
------------------- ----- ------
--------------------
------- ------ -------
-------- ---- ------
-
------- -
---------- -------
-
-------- -
---------- --------
-
----- -
---------- -----
-上述代码定义了一个有三列和两行的网格，其中第一列和第三列的宽度都是第二列的一半，第一行的高度是 100 像素，第二行的高度是 200 像素。网格区域被定义为一个字符串，其中 . 表示空单元格，而其他字符则表示对应的网格单元格。最后，我们将每个网格单元格与对应的 HTML 元素关联起来。
grid-template
grid-template 属性可以同时定义 grid-template-columns、grid-template-rows 和 grid-template-areas。它可以让你更方便地定义整个网格，而不需要分别定义每个属性。
示例代码：
.container {
display: grid;
grid-template:
"header header header"
"sidebar main main"
/ 1fr 2fr 1fr
/ 100px 200px;
}上述代码与前面的示例代码相同，只是使用了 grid-template 属性来定义整个网格。
grid-column-gap 和 grid-row-gap
grid-column-gap 和 grid-row-gap 属性用于定义网格列和行之间的间距。你可以使用长度单位或百分比来定义间距大小。
示例代码：
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
grid-column-gap: 10px;
grid-row-gap: 20px;
}上述代码定义了一个有三列和两行的网格，其中第一列和第三列的宽度都是第二列的一半，第一行的高度是 100 像素，第二行的高度是 200 像素。网格列和行之间的间距分别为 10 像素和 20 像素。
grid-gap
grid-gap 属性可以同时定义 grid-column-gap 和 grid-row-gap。它可以让你更方便地定义网格列和行之间的间距，而不需要分别定义每个属性。
示例代码：
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
grid-gap: 10px 20px;
}上述代码与前面的示例代码相同，只是使用了 grid-gap 属性来定义网格列和行之间的间距。
项目属性
grid-column-start、grid-column-end、grid-row-start 和 grid-row-end
grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性用于定义网格项目的位置。你可以使用数字或网格区域名称来定义位置。
示例代码：
.item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}上述代码定义了一个网格项目，它位于第一行的前两列。
grid-column 和 grid-row
grid-column 和 grid-row 属性可以同时定义 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end。它可以让你更方便地定义网格项目的位置，而不需要分别定义每个属性。
示例代码：
.item {
grid-column: 1 / 3;
grid-row: 1 / 2;
}上述代码与前面的示例代码相同，只是使用了 grid-column 和 grid-row 属性来定义网格项目的位置。
grid-area
grid-area 属性可以同时定义 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end。它可以让你更方便地定义网格项目的位置，而不需要分别定义每个属性。
示例代码：
.item {
grid-area: 1 / 1 / 2 / 3;
}上述代码与前面的示例代码相同，只是使用了 grid-area 属性来定义网格项目的位置。
justify-self 和 align-self
justify-self 和 align-self 属性用于定义网格项目的水平和垂直对齐方式。你可以使用 start、end、center、stretch 和 baseline 等值来定义对齐方式。
示例代码：
.item {
justify-self: center;
align-self: start;
}上述代码定义了一个网格项目，它水平居中，垂直顶部对齐。
place-self
place-self 属性可以同时定义 justify-self 和 align-self。它可以让你更方便地定义网格项目的对齐方式，而不需要分别定义每个属性。
示例代码：
.item {
place-self: center start;
}上述代码与前面的示例代码相同，只是使用了 place-self 属性来定义网格项目的对齐方式。
示例代码
下面是一个完整的 CSS Grid 布局的示例代码，它包含了网格容器和多个网格项目。
<div class="container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="main">Main</div> <div class="footer">Footer</div> </div>
-- -------------------- ---- -------
---------- -
-------- -----
--------------------
------- ------ -------
-------- ---- -----
------- ------ --------
---------------------- --- --- ----
------------------- ----- --- -----
--------- -----
-
------- -
---------- -------
----------------- --------
----------- -------
------------ ------
-
-------- -
---------- --------
----------------- --------
----------- -------
------------ ------
-
----- -
---------- -----
----------------- --------
----------- -------
------------ ------
-
------- -
---------- -------
----------------- --------
----------- -------
------------ -----
-上述代码定义了一个有三列和三行的网格，其中第一列和第三列的宽度都是第二列的一半，第一行的高度是 100 像素，第二行占据剩余的可用高度，第三行的高度是 50 像素。网格区域被定义为一个字符串，其中 . 表示空单元格，而其他字符则表示对应的网格单元格。最后，我们将每个网格单元格与对应的 HTML 元素关联起来。
总结
CSS Grid 是一种强大的布局方式，它可以让我们更轻松地创建复杂的布局，并且可以适应各种不同的屏幕尺寸和设备类型。在本文中，我们介绍了 CSS Grid 的常用属性，并提供了一些实际应用的示例代码，帮助你更好地掌握这种布局方式。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66378b46d3423812e45b4298