CSS Grid 是前端界最新的 HTML 和 CSS Layout 模块之一。 现在，作为Web开发者，你必须熟练掌握它。 本文将深入介绍 CSS Grid 并介绍实战应用技巧，通过这些技巧，你将掌握如何为自己的项目构建响应式布局。
什么是 CSS Grid?
CSS Grid 是一种二维布局系统，它允许我们在两个方向上构建复杂的网格布局。 在很多情况下，我们能够仅使用 CSS Grid 就能实现整个网页的布局，而无需依赖于其他工具、框架或库。
CSS Grid 由网格容器 （grid container）和网格项 （grid item）两部分组成。网格容器是一个元素，它把某一区域分成网格，使其中的内容能够在这些网格中排列。网格项则是容器中的子元素，我们可以在不规则或规则的网格中对其进行定位。
例子
我们可以通过简单的 HTML 和 CSS 代码来展示如何使用 CSS Grid 进行布局：
--------- -----
------
------
-------
--------------- -
-------- ----- --------- ------- ------
---------------------- --------- ------------------
-
----- -
------------ ----
----------------- --------
------ -----
------- ------
-------- -----
---------------- -------
------------ -------
-
-------- -
----------------- -----
------ -----
------- ------
-------- -----
---------------- -------
------------ -------
-
--------
-------
------
---- -----------------------
---- -------------
------- ---------
------
---- ----------------
----------- ------
------
---- ----------------
----------- ------
------
---- ----------------
----------- ------
------
------
-------
-------在这个例子中，我们首先通过 display: grid 把 .grid-container 元素设置为一个网格容器。接着我们使用 grid-template-columns 属性来声明这个网格中有三列，每一列的宽度都为 1fr。接下来，我们将 .hero 网格项跨越了这个网格中的三列，这就占据了所有可用的空间。剩下的 .feature 网格项都占据一个网格，每一个项等宽等高，周围没有间隔。
这里的 grid-column: 1/4 是新颖的 CSS Grid 实例之一。grid-column 属性接收一个内联视觉格式化模型（IVFM），可实现跨度效果。在这种情况下，我们指定 grid-column: 1/4，并从左边的网格线开始跨越三个网格，到右边的第四个网格线。一旦我们指定了这个网格项的跨度，我们就可以把宽度和高度指定为直接的 CSS 属性，并且与之前所使用的不同，无需依赖于其他非标准的技巧。
实战应用
下面，我们将通过实际示例来演示如何使用 CSS Grid。我们将创建一个完整的网页布局，它能够有效地响应移动设备和桌面端设备的尺寸。
设计
我们将创建一个基于固定宽度和高度的网页布局，使用网格系统来实现。通过设置基于 viewport 的上下文，网页布局将在不同的屏幕尺寸下自适应。我们可以通过媒体查询的方式来控制不同屏幕尺寸下的 CSS Grid 的宽度和高度。
HTML
以下是我们用来构建这个布局的 HTML 结构。
--------
---- ------ ------- ---
---------
------
---------
---- ------- ------- ---
----------
---------
---- ------- ------- ---
----------
-------
---- ----- ------- ---
--------
-------
--------
---- ------ ------- ---
---------CSS
为了创建一个有效的 CSS Grid 系统，我们需要在网格容器上定义网格栏和网格行。 我们还需要定义每个网格项对应的网格行和网格列以及排列方法等。
-- ---- --
--------------- -
-------- -----
---------------------- ---------- -----
------------------- ---- ---- ---- ---- -----
--------- -----
--------------------
------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ -------
----- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- -
----- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- -
----- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- -
------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ --------
--------------------- -------- --- -------
-
-- -------
------ -
---------- -------
-
---- -
---------- -----
-
------- -
---------- ----- -- ------------------------
-
----- -
---------- ----- -- -------------------------
-
------ -
---------- -------
-在这个示例中，我们设置了一个基于行和列的网格。我们以 repeat(24, 1fr) 的方式样式化网格。这会为我们创建一个具有 24 列、1/24 的可用宽度的默认值的网格。我们还定义了 5 行，其中 auto 和 1fr 将针对每行为我们动态设置高度。 grid-gap 属性允许我们定义栏和行之间的空隙大小。这样我们就能够为网格项定义布局位置。
grid-template-areas 属性允许我们将类似于“表格单元格”的区域映射到网格的位置上。我们用字符串定义每个网格单元格的区域名，并按顺序列出它们，这样就可以组成一个完整的网格布局。在这个示例中，我们要创建一个充满整个屏幕的布局。grid-template-areas 中使用的名称与我们为每个元素在 HTML 中定义的区域相同。这让我们将上一个示例定义的 header、main、aside 和 footer 与其对应的区域相匹配，并在我们的网页布局中实现我们的设计。
在我们的示例中，我们使用简洁的 grid-area 属性来为网格容器中的每个网格项定义区域。在这个例子中，我们已经设置了一个布局，它实现了一个横向和纵向的三栏布局。我们可以将 section 引用到 main 区域中来实现双栏布局并指定它们的方向方式。
总结
CSS Grid 提供了一种强大的二维方案，用于构建网页布局系统。它创造了简单，灵活，高效的布局方式。在实践应用中，当你需要构建复杂的布局并且希望使你的工作更加简单时，CSS Grid 非常有用。本文介绍了如何搭建一个自适应响应式接口布局。这些技巧可以用来创建网站模板、应用商店和信息门户，并且适用于所有屏幕大小和设备。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654c83b67d4982a6eb5fde50