什么是 CSS Grid
在前端开发领域，CSS Grid Layout 是最近几年流行的一种用来布局网页的技术。CSS Grid Layout 可以将网页的布局划分为行和列，使用类似于表格的方式将元素对齐和布局，而不需要使用复杂的定位和浮动技术。CSS Grid Layout 使设计和开发网页变得更加高效，同时也能够实现各种优秀的响应式设计。
CSS Grid 的基本概念
在使用 CSS Grid Layout 进行网页布局之前，需要先了解以下几个基本的概念：
网格容器：使用 grid 布局的元素称为网格容器。可以使用 display 属性设置其为 grid 或 inline-grid。
网格条目：将网格容器中的元素称为网格条目。
网格行和网格列：网格容器可以被划分为任意数量的网格行和网格列。
网格单元：每个网格行和网格列的交汇处称为网格单元。
网格线：分割网格容器的垂直或水平线称为网格线。
网格轨道：两个相邻的网格线和其间隔区域组成的空间称为网格轨道。
如何使用 CSS Grid 布局
在使用 CSS Grid 进行网页布局之前，需要先为网格容器设置网格属性。以下是一个基本的示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}在上述代码中，我们创建了一个拥有 3 行和 3 列的网格容器，其中每个网格轨道的大小都被设置为 1fr。 需要注意的是，repeat() 函数用于将模板应用于每一列或每一行。
下一步，我们需要为每个网格条目分配其所在的行和列。可以使用 grid-row 和 grid-column 属性来分配必要的行和列。下面是一个示例代码：
-- -------------------- ---- -------
--------------- ---------------- -
--------- - - --
------------ - - --
-
--------------- ---------------- -
--------- - - --
------------ - - --
-
--------------- ---------------- -
--------- - - --
------------ - - --
-
-------在上述代码中，我们为每个网格条目指定了它们所在的行和列。使用 grid-row 和 grid-column 属性，我们可以轻松地控制网格条目的位置。
实例：一个使用 CSS Grid 布局的响应式网页
下面我们来看一个实例，它演示了如何使用 CSS Grid 布局创建一个响应式网页。在该网页中，我们将创建一个基于网格的布局，其中网格容器包含多个网格条目。每个条目用不同的颜色进行了区分，以便您可以清晰地看到它们的位置和大小。
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ ------ --------------- -------- ----------------- - ----------- ----- ------------------------- --------- ----- -- ---- -- ------------------ ------------- ------ -- ------ -- ------------ ----- -- ---- -- --- ------------ - --------- ----- ------------- ---- -------------- ------- -------------------- -------- ----------- ----- --- -------------------------- - -------------------- -------- --- -------------------------- - -------------------- -------- --- -------------------------- - -------------------- -------- --- -------- ------ --- ----------- ------ - -- ----- -- ------------------ - -------------------------- ---- ---- --- --------- ------- ------ ----- ----------------------- ------ ------------------------- ------ ------------------------- ------ ------------------------- ------ ------------------------- ------ ------------------------- ------ ------------------------- ------ ------------------------- ------ ------------------------- ------- ------- -------
在上述代码中，我们首先创建了一个拥有四列和自动调整行高的网格容器。然后我们为每个网格条目创建了一个类名为 grid-item，并将其放入到网格容器中。最后，我们使用 CSS 属性来为每个Grid item设置不同的背景颜色。
最终的网页布局如下图所示：
在上述代码中，还针对小屏幕设备应用了一个媒体查询条件，将网格容器的模板设置为一个单独的列。这表示网页会在小屏幕上变得更加紧凑，因为这样一个网格条目将占用整个屏幕宽度。
总结
CSS Grid Layout 是一种高效且易于使用的布局技术。它允许开发人员通过指定行和列以及网格单元的宽度和高度控制网页的布局。通过使用 CSS Grid，我们可以避免使用繁琐的定位技术，从而更轻松地创建响应式布局来适应不同大小和不同屏幕的设备。
最后，希望本文可以帮助到大家了解并熟练使用 CSS Grid 布局技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bd40848841e9894a1fc2d