当你需要在网页布局中创建一个不规则的流动布局时，CSS Grid 可以非常有用。CSS Grid 属性可以帮助你轻松地创建出具有弹性的、可控制的并且自定义的网页布局。当然，在使用 CSS Grid 的过程中需要进行一些额外的努力，但是最终得到的结果值得你投入这些努力。接下来，本文将为你介绍如何使用 CSS Grid 处理不规则流动布局的方法。
步骤一：创建 CSS Grid
在处理不规则流动布局之前，首先需要创建一个 CSS Grid。创建 CSS Grid 最简单的方法是通过 CSS 的 display 属性，如下所示：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 100px;
grid-gap: 20px;
}在这个 CSS Grid 中，grid-template-columns 属性设置了自动填充的网格列，这样我们就可以使用 auto-fill 参数来自动生成网格行。除此之外，我们还需要设置网格行的高度、网格之间的距离、以及每个网格的最小宽度。此时，我们可以通过 minmax 属性来设置每个网格的最小宽度，这将完全适应于它们放置的内容。通过这种方式，我们就可以创建出一个灵活的、适应性强的网页布局。
步骤二：使用 CSS Grid 处理不规则流动布局
一旦我们已经创建了一个灵活的 CSS Grid，在处理不规则流动布局时，我们可以使用一些技巧来实现我们所需要的布局。下面是一些可以帮助你实现不规则流动布局的 CSS Grid 技巧。
1. 网格行或列跳跃
有时，我们可能需要在网格布局中创建跳跃网格行或列。例如，在下面的示例中，我们在第二行的第二列右下方的两个网格中创建了跳跃布局。
.item-4 {
grid-row: 2 / span 2;
grid-column: 2 / span 2;
}由于我们已经为整个 Grid 设置了网格行和网格列的数量和距离，因此我们可以轻松地使用 grid-row 和 grid-column 属性来将特定数量的网格行或网格列跳跃到任何位置。最终，你可以创建任何你希望实现的跳跃布局。
2. 使用区域
另一个非常有用的属性是 grid-area。使用该属性，我们可以将一些特定的网格位置指定为一个区域。例如，下面的示例演示了如何将前三个网格应用一个区域。
.item-1 {
grid-area: 1 / 1 / 2 / 3;
}这里我们使用 grid-area 指定了网格行和列的起始位置和结束位置，从而形成一个“网格区域”。通过这种方式，我们可以将网格按照任何我们想要实现的方式分割。
3. 不规则网格网格布局
在某些情况下，我们可能需要在 CSS Grid 中创建不规则网格。这可以通过使用 grid-template-areas 属性来实现。在 grid-template-areas 属性中我们可以使用类似 ASCII 图形的方式来指定不同区域的布局。
例如，下面的示例显示了一个使用 grid-template-areas 属性来创建不规则网格的例子。
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- ----- ----- ------
------------------- ----- ------
--------------------
------- ------ ------
----- ---- -------
-
------- -
---------- -------
-
------ -
---------- ------
-
----- -
---------- -----
-在这个示例中，我们首先定义了 CSS Grid，然后使用 grid-template-areas 属性来指定布局的形式。最后，我们将每个区域设置为一个特定的位置。使用这种方式，我们就可以创建出任何类型的网格布局。
结论
CSS Grid 是一个非常有用的工具，可以帮助我们轻松创建任何类型的网页布局，特别是处理不规则流动布局。在本文中，我们介绍了使用 CSS Grid 来处理不规则流动布局的方法。无论是使用跳跃布局、区域或不规则网格，CSS Grid 可以帮助你实现你想要的任何类型布局。下面是我们演示上述所有技能的最终样式。
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- ----------------- ------------- ------
--------------- ------
--------- -----
-
------- -
---------- - - - - ---- - - ---- --
-
------- -
--------- - - ---- --
------------ - - ---- --
-
------- -
--------- - - ---- --
------------ --
-
------- -
--------- --
------------ --
-
------- -
--------- --
------------ - - ---- --
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729442f2e7021665e2387cc