在之前的前端布局中，我们使用了各种技术来实现网页 UI 的布局，如浮动、定位、Flexbox 等等。虽然这些技术很强大，但它们的灵活性和可扩展性也有一定的局限性。在这种情况下，CSS Grid 应运而生。CSS Grid 是一种强大而灵活的布局系统，它提供了一种在网格上排列 HTML 元素的简单方法。本文将教你如何使用 CSS Grid 实现响应式 UI 布局。
初步认识 CSS Grid
CSS Grid 是 CSS 中的一种新的布局模式，它提供了一种在水平和垂直方向上创建网格的方式。在这个网格中，我们可以放置 HTML 元素，并对它们进行对齐和布局。
使用 CSS Grid 可以让我们更好地控制网站的布局，带来更佳的灵活性和可扩展性。一般来说，使用 CSS Grid 布局的网站可以更轻松地实现响应式设计，因为网格可以自动适应屏幕大小。下面是一些常用 CSS Grid 的术语：
网格容器（grid container）
包含网格的父元素称为网格容器，通过在其上设置 CSS 属性 display: grid; 可以将其变成网格容器。
网格单元（grid item）
放置在网格中的 HTML 元素称为网格单元。
网格线（grid line）
网格线是网格容器中用于定位和对准网格单元的线。
网格轨道（grid track）
网格轨道是由相邻的两个网格线形成的空间，是网格单元的分隔符。
网格列（grid column）
由相邻垂直网格线之间的网格轨道组成的列。
网格行（grid row）
由相邻水平网格线之间的网格轨道组成的行。
网格区域（grid area）
由四个相邻的网格线组成的矩形区域。
实现响应式 UI 布局
现在我们将使用 CSS Grid 来实现响应式 UI 布局。布局将包含三个网格行和三个网格列，如下所示：
在该布局中，底部的区域可自动适应屏幕大小。
1. 创建网格容器
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr auto;
grid-gap: 10px;
}在上面的代码中，我们创建了一个名为 .container 的网格容器，并使用 display: grid; 将其设置为网格容器。然后，我们使用 grid-template-columns 和 grid-template-rows 属性来定义三列和三行的网格，每个网格轨道的大小为 1fr。最后，我们使用 grid-gap 属性来设置单元格之间的间距为 10px。
2. 定义网格单元
-- -------------------- ---- ------- ----- - ----------------- ----------- ------ ------ -------- ----- - ------- - ------------ - - ---- -- --------- -- - ------- - ------------ -- --------- - - ---- -- - ------- - ------------ -- --------- - - ---- -- - ------- - ------------ -- --------- -- - ------- - ------------ - - ---- -- --------- -- -
在上面的代码中，我们创建了五个名为 .item 的网格单元，并将它们放置在网格容器中。我们通过 grid-column 和 grid-row 定义了不同的行和列来定位每个网格单元。
3. 实现响应式设计
-- -------------------- ---- -------
------ ----------- ------ -
---------- -
---------------------- ----
------------------- --------- ------
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
-在上面的代码中，我们设置了一个响应式媒体查询，当屏幕尺寸小于 768px 时使用单列布局代替三列布局。通过使用 repeat 函数，我们重复了五个自适应的网格行。
示例代码
以下是完整的示例代码，包括默认布局和响应式布局：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
---------- ---- --------------
-------
---------- -
-------- -----
---------------------- --- --- ----
------------------- --- --- -----
--------- -----
-
----- -
----------------- -----------
------ ------
-------- -----
-
------- -
------------ - - ---- --
--------- --
-
------- -
------------ --
--------- - - ---- --
-
------- -
------------ --
--------- - - ---- --
-
------- -
------------ --
--------- --
-
------- -
------------ - - ---- --
--------- --
-
------ ----------- ------ -
---------- -
---------------------- ----
------------------- --------- ------
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
-
--------
-------
------
---- ------------------
---- ----------- ---------------
---- ----------- ---------------
---- ----------- ---------------
---- ----------- ---------------
---- ----------- ---------------
------
-------
-------总结
CSS Grid 提供了一种简单而强大的方法来创建网格布局，具有更好的灵活性和可扩展性。使用 CSS Grid 可以更轻松地实现响应式布局，以便您的网站在不同的屏幕尺寸上看起来都适合良好。在本文中，我们深入了解了 CSS Grid 的相关术语和用法，并演示了如何使用 CSS Grid 实现响应式 UI 布局。希望这篇文章能对你理解和运用 CSS Grid 布局起到帮助作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648aed6d48841e9894940d4e