什么是 CSS Grid
CSS Grid 是一种新的布局方式，可以让我们快速地创建复杂的布局。它比传统的布局方式更灵活，因为它允许开发人员将页面分成多个区域，并通过定义基于行和列的网格来控制这些区域。
CSS Grid 是一项非常重要的技术，因为它可以使我们更容易地创建可重用、可维护和可扩展的布局。
如何使用 CSS Grid 实现正方形宫格网布局
在 CSS Grid 中，我们可以使用 grid-template-columns 和 grid-template-rows 属性来设置网格的列和行，由此可以实现正方形宫格网布局。
首先，我们需要定义一个包含了所有正方形块的容器。我们可以使用 display: grid; 属性来定义一个网格容器，并在元素的内部定义一些网格行和网格列。
-- -------------------- ---- ------- ---- ---- -- --- ---- ----------------------- ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ------
-- -------------------- ---- ------- -- --- -- -- --------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---- ----- - ---------- - ----------------- -------- -
在上面的 CSS 代码中，我们使用 repeat() 函数定义了3行和3列的网格，并使用 1fr 分配网格的大小。我们还使用了 gap 属性来定义网格之间的间隔。
接下来，我们需要为每个正方形块定义一个类，并将它们添加到网格容器中。
-- -------------------- ---- ------- -- --- -- -- --------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---- ----- - ---------- - ----------------- -------- ------ ----- ------- -- --------------- ----- -
在上面的 CSS 代码中，我们使用了 padding-bottom 来设置 grid-item 元素的高度。这会让每个元素按照正方形的宽高比例来设置宽度和高度。
最后，我们需要将每个正方形块填充到网格中。
-- -------------------- ---- ------- -- --- -- -- ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- -
在上面的 CSS 代码中，我们为每个正方形块定义了它们所在的行和列。这样，它们就会填充到网格中，形成一个完美的宫格布局。
总结
CSS Grid 是一个非常强大的技术，可以使我们更轻松、更快速地创建复杂的布局。本文简要介绍了如何使用 CSS Grid 实现正方形宫格网布局，希望能对前端初学者有所帮助。
附完整示例代码：
-- -------------------- ---- ------- ---- ---- -- --- ---- ----------------------- ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ------
-- -------------------- ---- ------- -- --- -- -- --------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---- ----- - ---------- - ----------------- -------- ------ ----- ------- -- --------------- ----- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- - ----------------------- - --------- - - -- ------------ - - -- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e8451af6b2d6eab33ca3eb