CSS Grid 是一个用于网格化布局的 CSS 模块，它可以让你创建复杂的布局并轻松地控制各个部分的位置和大小。通过 CSS Grid，你可以快速创建响应式布局，这意味着你的布局可以自适应不同设备和屏幕尺寸。
在本篇指南中，我们将探讨如何使用 CSS Grid 实现响应式布局以及如何利用其功能来创建具有深度和学习价值的布局。我们将以实例代码的形式提供指导，让你更好地理解 CSS Grid 的应用。
CSS Grid 基础知识
在开始介绍 CSS Grid 的应用之前，首先需要掌握其基础知识。CSS Grid 由两个组件组成：容器 (container) 和项目 (item)。
容器是一个包含网格项目的元素，并通过网格 (grid) 来定义其布局。每个项目则占据一个或多个网格单元格 (grid cell)。CSS Grid 布局有两个维度：行 (row) 和列 (column)，它们被称为 Grid 行和 Grid 列。
要将一个元素定义为网格容器，可以使用以下代码：
.container {
display: grid;
}这会将 .container 元素标记为网格容器，并启用网格布局。接下来，你可以通过 grid-template-columns 和 grid-template-rows 属性来指定网格的行和列。
例如，以下代码将网格定义为具有三个列和三个行的网格：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
}这会创建一个具有 9 个网格单元格的网格，每个网格单元格都是 100 像素高。
要将一个元素定义为网格项目，可以使用 grid-column 和 grid-row 属性。
例如，以下代码将 .item 元素放置在网格的第一行和第一列：
.item {
grid-column: 1;
grid-row: 1;
}这会将 .item 元素放置在网格的第一行和第一列，占据一个网格单元格。它还可以使用以下代码来指定 grid-column 和 grid-row 属性：
.item {
grid-column: 1 / 3;
grid-row: 1 / span 2;
}这会将 .item 元素放置在第一列的第一行和第二行中，占据两个网格单元格。其中，grid-column 的值为 1 / 3 表示该元素跨越了两列，而 grid-row 的值为 1 / span 2 表示该元素从第一行开始，跨越了两个行。
实例一：轻松实现响应式布局
在这个实例中，我们将通过 CSS Grid 实现一个简单的响应式布局，它将自适应不同的设备和屏幕尺寸。我们将为每个项目分配一个固定的宽度，并使用 CSS Grid 确保它们在网格中正确分布。
首先，我们需要创建一个网格容器 .grid-container 和四个项目 .item-1, .item-2, .item-3, .item-4。我们可以通过以下代码来定义它们：
<div class="grid-container"> <div class="item-1"></div> <div class="item-2"></div> <div class="item-3"></div> <div class="item-4"></div> </div>
然后，我们需要将网格定义为不同的列，这样我们才能将其应用于项目。我们可以使用以下代码将网格定义为具有两列：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}以上代码将 .grid-container 定义为网格容器，并将网格的列定义为两个等宽的列。接下来，我们需要将四个项目放入这个网格中，并定义它们所显示的位置。我们可以使用以下代码将第一个项目 .item-1 放置在第一列第一行：
.item-1 {
grid-column: 1;
grid-row: 1;
}grid-column: 1 表示 .item-1 放置在第一列，grid-row: 1 表示该项目放置在第一行。接下来，我们使用相似的方法定义所有其他项目的位置。请参考下面的代码块：
-- -------------------- ---- ------- -- ------- -- ------- - ------------ -- --------- -- - -- ------- -- ------- - ------------ -- --------- -- - -- ------- -- ------- - ------------ -- --------- -- -
最后，我们应该定义每个项目的大小。我们将使用 width 属性将每个项目的宽度设置为 200 像素，并使用 margin 属性将它们之间的距离设置为 20 像素。我们可以使用以下代码来实现它们：
.grid-container * {
box-sizing: border-box;
}
.item-1, .item-2, .item-3, .item-4 {
width: 200px;
margin: 20px;
}这会将网格项目的宽度设置为 200 像素，并将它们之间间隔设置为 20 像素。
实例二：创建复杂的响应式布局
在这个实例中，我们将创建一个更为复杂的响应式布局。这个布局将使用 CSS Grid 和媒体查询来构建，以确保它在不同的设备和屏幕尺寸上都显示正常。
我们需要一个网格容器 .grid，其中包含 9 个项目，分别为 .item-1、.item-2、.item-3、.item-4、.item-5、.item-6、.item-7、.item-8 和 .item-9。我们可以使用以下代码来定义这个容器和它的项目：
-- -------------------- ---- ------- ---- ------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ------
然后，我们需要定义网格的行和列。我们可以使用以下代码定义网格容器 .grid 的列宽和行高：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 20px;
}以上代码将网格定义为具有 3 列和 3 行，并使用 grid-gap: 20px 属性将各个项目之间的间距设置为 20 像素。
接下来，我们将为每个项目指定放置位置。以下是每个项目所在的位置：
-- -------------------- ---- ------- -- ----- -- ------- - --------- - - ---- -- ------------ - - ---- -- - -- ----- -- ------- - --------- -- ------------ -- - -- ----- -- ------- - --------- -- ------------ -- - -- ----- -- ------- - --------- -- ------------ -- - -- ----- -- ------- - --------- -- ------------ -- - -- ----- -- ------- - --------- -- ------------ - - ---- -- - -- ----- -- ------- - --------- -- ------------ - - ---- -- - -- ----- -- ------- - --------- -- ------------ -- - -- ----- -- ------- - --------- -- ------------ -- -
如你所见，我们使用了 grid-row 和 grid-column 属性来指定每个项目的位置。
最后，我们将使用媒体查询来根据不同的设备和屏幕尺寸排列不同的项目。例如，我们可以使用以下代码将此布局适合于小屏幕设备：
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
------- -
--------- --
------------ - - ---- --
-
------- -
--------- --
------------ - - ---- --
-
------- -
--------- --
------------ - - ---- --
-
------- -
--------- --
------------ - - ---- --
-
------- -
--------- --
------------ - - ---- --
-
--------
------- -
--------- --
------------ - - ---- --
-
------- -
--------- --
------------ - - ---- --
-
------- -
--------- --
------------ - - ---- --
-
-这个媒体查询将使用 grid-row 和 grid-column 属性，以将项目布置为适合更小屏幕的网格布局。在此示例中，我们需要依次重新排列所有项目，以便它们都可以适应屏幕尺寸。这可以通过相应地调整 grid-row 和 grid-column 的值来完成。
结论
CSS Grid 是一个非常有用的工具，可以帮助我们迅速创建复杂的布局和响应式布局。通过掌握 CSS Grid 的基础知识和这两个实例，你可以更好地理解其在布局中的应用，从而创建更高质量的响应式布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67088a28d91dce0dc8722b4c