CSS Grid 是一种用于布局的强大工具，它可以帮助你创建复杂的布局和响应式设计。本指南将涵盖一些 CSS Grid 基础知识，以及一些实用技巧和示例代码，帮助你更好的应用 CSS Grid。
CSS Grid 基础知识
CSS Grid 是一个二维网格系统，有两个主要的概念：网格容器和网格项。一个网格容器是你想要创建网格的区域，一个网格项则是该区域内的一个元素。在 CSS 中，网格容器用 display: grid 进行设置。
网格行和列
在网格容器中，你可以通过定义网格行和列来创建网格。你可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格。例如：
.container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* 定义3个网格行，并设置它们的高度为 1 具有弹性的单位 */
grid-template-columns: repeat(3, 1fr); /* 定义3个网格列，并设置它们的宽度为 1 具有弹性的单位*/
}网格单元格
在网格容器中，你可以使用 grid-row-start、grid-row-end、grid-column-start、grid-column-end 属性来定义每个网格项所占用的行和列。例如：
.item {
grid-row-start: 1;
grid-row-end: 3; /* 这个元素占据了第一行和第二行 */
grid-column-start: 2;
grid-column-end: 4; /* 这个元素占据了第二列，第三列和第四列 */
}网格行和列距离
你可以使用 grid-row-gap 和 grid-column-gap 属性设置网格行和列之间的距离。例如：
.container {
grid-row-gap: 10px;
grid-column-gap: 20px;
}网格轨道
网格轨道是网格行和列之间的空间。你可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格轨道。例如：
.container {
display: grid;
grid-template-rows: 50px 100px; /* 定义两条网格轨道，高度分别为 50px 和 100px */
grid-template-columns: 100px 50px; /* 定义两条网格轨道，宽度分别为 100px 和 50px */
}设置网格轨道时，你可以使用一些特殊的关键字来定义它们的大小，如 fr、min-content 和 max-content。例如：
.container {
display: grid;
grid-template-rows: 1fr min-content max-content; /* 这定义了三个不同大小的网格行 */
grid-template-columns: repeat(3, 1fr);
}网格区域
你可以通过指定网格项所占用的网格单元格区域，来更精确的定义网格布局。例如：
.item {
grid-area: 1 / 2 / 3 / 4; /* 它占据了第一行和第二行的第二列和第三列 */
}CSS Grid 实用技巧
水平和垂直居中
在 CSS Grid 中，你可以使用 justify-content 属性和 align-content 属性将元素水平和垂直居中。例如：
.container {
display: grid;
justify-content: center; /* 水平居中 */
align-content: center; /* 垂直居中 */
}响应式布局
CSS Grid 可以轻松实现响应式布局。你可以使用 media queries 和 grid-template-areas 属性来创建不同的布局。例如：
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --------- -----
------------------- --------- -------
-
------ ----------- ------ -
---------- -
--------------------
--------
---------
------
---------
---------------------- ----
------------------- --------- ------
-
------- -
---------- -------
-
-------- -
---------- --------
-
----- -
---------- -----
-
------- -
---------- -------
-
-这将创建一个在大屏幕上为三列，小屏幕上为单列的布局。
拍平布局
你可以创建一个拍平布局，将多个网格单元格合并为一个。例如：
-- -------------------- ---- ------- ----- - --------------- -- ------------- -- ------------------ -- ---------------- -- - ------------------ - --------------- -- ------------- -- ------------------ -- ---------------- -- -
这将创建一个将两个网格单元格合并在一起的布局。
CSS Grid 示例代码
使用 CSS Grid 创建一个典型的网格布局：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ------- - ----- - ----------------- ----- ------- --- ----- ----- -
在一个更复杂的布局中使用 CSS Grid：
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --------- -----
------------------- --------- ------
--------- -----
--------------------
------- ------ -------
-------- ---- -----
-------- ---- -----
------- ------ --------
-
------- -
---------- -------
-
-------- -
---------- --------
-
----- -
---------- -----
-
------- -
---------- -------
-结论
CSS Grid 是一个强大的工具，它可以帮助你创建复杂的布局和响应式设计。本指南概述了一些 CSS Grid 基础知识和实用技巧，并提供了示例代码，帮助您更好的应用 CSS Grid。无论您是否是初学者，都应该掌握这种布局技术，以便更好地构建 Web 页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67397fa2317fbffedf17109e