CSS Grid 网格布局是一种强大的前端布局方式，它可以让我们实现复杂的网格布局，而不需要依赖于传统的 float 和 position 属性。在本篇文章中，我们将深入了解 CSS Grid 网格布局，包括其基础概念、语法、属性、实例应用等。
基础概念
在了解 CSS Grid 网格布局之前，我们需要先了解一些基础概念。
网格容器
网格容器是一个包含网格项的容器。通过设置网格容器的属性，可以定义网格系统的行和列。
网格项
网格项是网格容器中的子元素，它们可以被放置在网格系统的单元格中。每个网格项可以占据一个或多个单元格。
网格线
网格线是网格系统中的虚拟线条，它们用于定义网格容器的行和列。网格线可以是水平线或垂直线。
网格轨道
网格轨道是相邻网格线之间的空间，它们可以是行轨道或列轨道。
网格单元格
网格单元格是网格系统中的一个矩形空间，由相邻的行轨道和列轨道所定义。
语法
CSS Grid 网格布局的语法非常简单，只需要在网格容器上设置 display: grid 即可开启网格布局。然后，通过 grid-template-rows 和 grid-template-columns 属性来定义网格系统的行和列。
---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- -
在上面的例子中，我们定义了一个包含三行和三列的网格系统，每一行的高度分别为 100px、200px 和 300px，每一列的宽度比例为 1:2:1。
属性
除了 grid-template-rows 和 grid-template-columns 属性之外，CSS Grid 网格布局还有很多其他属性可以使用，下面是一些常用属性的介绍。
grid-template-areas
grid-template-areas 属性可以让我们使用字符来定义网格系统中的区域。例如：
---------- -
-------- -----
------------------- ----- ----- ------
---------------------- --- --- ----
--------------------
------- ------ -------
-------- ---- -----
------- ------ --------
-
------- -
---------- -------
-
-------- -
---------- --------
-
----- -
---------- -----
-
------- -
---------- -------
-在上面的例子中，我们使用 grid-template-areas 属性来定义了一个包含三行三列的网格系统，并使用字符来定义了网格系统中的区域。然后，我们可以使用 grid-area 属性来指定每个网格项所在的区域。
grid-row-gap 和 grid-column-gap
grid-row-gap 和 grid-column-gap 属性可以分别用来设置网格系统中的行和列之间的间隙大小。
---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- ------------- ----- ---------------- ----- -
在上面的例子中，我们设置了行之间的间隙为 10px，列之间的间隙为 20px。
grid-auto-rows 和 grid-auto-columns
grid-auto-rows 和 grid-auto-columns 属性可以用来设置未被显式定义的行和列的大小。
---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- --------------- ------ ------------------ ---- -
在上面的例子中，我们设置未被显式定义的行的高度为 100px，未被显式定义的列的宽度比例为 1:1。
grid-auto-flow
grid-auto-flow 属性可以用来指定网格项的自动排列方式。默认值为 row，表示按行排列，也可以设置为 column，表示按列排列。
---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- --------------- ------- -
在上面的例子中，我们将网格项按列排列。
justify-items 和 align-items
justify-items 和 align-items 属性可以用来设置网格项的水平和垂直对齐方式。
---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- -------------- ------- ------------ ------- -
在上面的例子中，我们将网格项都居中对齐。
justify-content 和 align-content
justify-content 和 align-content 属性可以用来设置整个网格系统的水平和垂直对齐方式。
---------- - -------- ----- ------------------- ----- ----- ------ ---------------------- --- --- ---- ---------------- ------- -------------- ------- -
在上面的例子中，我们将整个网格系统都居中对齐。
实例应用
下面是一个实例应用，展示了如何使用 CSS Grid 网格布局来实现一个响应式的图片墙。
---- ------------------ ---- ----------- ------------- ---- ----------- ------------- ---- ----------- ------------- ---- ----------- ------------- ---- ----------- ------------- ---- ----------- ------------- ---- ----------- ------------- ---- ----------- ------------- ---- ----------- ------------- ------
---------- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- - ----- - ----------------- ----- ------------ ----- --------- --------- --------- ------- - ------------ - -------- --- -------- ------ ------------ ----- - ----- --- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----------- ------ -
在上面的例子中，我们使用了 repeat(auto-fit, minmax(200px, 1fr)) 来实现了一个自适应的网格系统，每个网格项的最小宽度为 200px，最大宽度为 1fr。然后，我们通过设置 padding-top: 100% 和 position: relative 来实现了一个固定比例的容器，再通过 position: absolute 和 object-fit: cover 来实现了一个响应式的图片墙。
总结
CSS Grid 网格布局是一种强大的前端布局方式，它可以让我们实现复杂的网格布局，而不需要依赖于传统的 float 和 position 属性。在本篇文章中，我们深入了解了 CSS Grid 网格布局的基础概念、语法、属性和实例应用，希望能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663c23ded3423812e4a03427