CSS Grid 是一个强大的布局系统，可以快速、简单地创建各种布局效果。在这篇文章中，我们将使用 CSS Grid 实现各种著名布局的例子，并探讨如何使用 CSS Grid 更有效地创建网页布局。
什么是 CSS Grid？
CSS Grid 是一个二维格子布局系统，它能够让我们创建出令人惊叹的布局效果。CSS Grid 是基于网格的，可以让我们通过将一个网格划分成多个单元格，来对元素进行定位和布局。
如何使用 CSS Grid？
要使用 CSS Grid，我们需要定义一个网格容器，然后将该容器分成多个单元格。每个单元格都可以包含一个或多个元素，我们可以通过设置网格的行和列，来对元素进行定位和布局。
以下是一个基本的 CSS Grid 示例：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ----- ----- ------ - ---------- - ----------------- ----- -
在上面的示例中，我们创建了一个名为 grid-container 的容器，并将其定义为网格布局。我们还使用 grid-template-columns 和 grid-template-rows 属性，将该容器分成了 9 个等宽、等高的单元格。我们最后定义了一个名为 grid-item 的元素，并为其填充了一个背景色。
实现著名布局
下面是几个使用 CSS Grid 实现的著名布局。
1. Holy Grail 布局
Holy Grail 布局是一种流行的三栏布局，其中中间的栏宽度可变。下面是一个使用 CSS Grid 实现 Holy Grail 布局的示例：
-- -------------------- ---- -------
--------------- -
-------- -----
--------------------
------- ------ -------
-------- ---- -----
-------- ------ --------
---------------------- ----- --- ----
------------------- ---- --- -----
-
------- -
---------- -------
-
-------- -
---------- --------
-
----- -
---------- -----
-
------- -
---------- -------
-在上面的示例中，我们使用 grid-template-areas 属性定义了一个名为 grid-container 的容器，并指定了其分成了 3 行和 3 列的网格布局。我们还使用 grid-template-columns 属性让左边的栏和右边的栏都具有相同的宽度，并使用 1fr 占据了空白处。
最后，我们使用 grid-area 属性，为每个元素定位到相应的单元格中。
2. Masonry 布局
Masonry 布局是一种流行的瀑布流布局，其中每个元素的大小不同，但它们可以自动排列并填补空白。下面是一个使用 CSS Grid 实现 Masonry 布局的示例：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------------- ------------- ------ --------- ----- - ----- - ----------------- ----- -
在上面的示例中，我们使用 repeat() 函数创建了一个 3 列的网格布局，并使用 grid-auto-rows 属性让每一行的高度自适应。我们还使用 grid-gap 属性为每个单元格添加一个 20px 的间距。最后，我们将一个名为 item 的元素放到布局中，为其设置了一个背景色。
3. Circle 布局
Circle 布局是一种基于圆形的布局，其中元素沿着一个圆形排列。下面是一个使用 CSS Grid 实现 Circle 布局的示例：
-- -------------------- ---- ------- ----------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---------------- ------- -------------- ------- ---------- --------------- - ------------ - ----------------- ----- -------------- ---- - ------------------------- - --------- -- ------------ -- ------ ------ ------- ------ - ------------------------- - --------- -- ------------ -- - ------------------------- - --------- -- ------------ -- - ------------------------- - --------- -- ------------ -- - ------------------------- - --------- -- ------------ -- -
在上面的示例中，我们创建了一个名为 circle-container 的容器，定义了一个 5 行 5 列的网格布局，并使用 transform 属性将其旋转了 45 度。我们还使用 justify-content 和 align-content 属性将元素居中对齐。
我们最后为每个元素设置了 grid-row 和 grid-column 属性，让它们沿着一个圆形排列，并为第一个元素设置了宽度和高度。
总结
在本文中，我们使用 CSS Grid 实现了几个著名的网页布局，并探讨了 CSS Grid 布局系统的使用方法。CSS Grid 是一个非常强大的工具，可以帮助我们更有效地创建网页布局。希望通过这篇文章，读者可以更深入地了解 CSS Grid，并在之后的开发中更加灵活地应用该技术。
代码示例：
https://codepen.io/pen/?template=GdjzWzb
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450a450980a9b385b99cfaf