前言
CSS Grid 布局是近年来前端开发领域最显著的改进之一。它听起来有些复杂，但是一旦你搞定了它，你将会意识到它是一个强大到足以让你快速布局整个页面的工具。 在这篇文章中，我们会一步一步地学习如何使用 CSS Grid 布局属性，我们也会通过一些实际的项目经验来掌握这些技术。
理解 CSS Grid
在你开始使用 CSS Grid 布局之前，你首先需要理解它究竟是什么以及如何使用。
CSS Grid 布局是一种二维布局模式，是一个网格系统，它的概念类似于 Excel 中的单元格。通过使用这种布局模式，我们可以很方便地进行网页布局，适用于各种屏幕尺寸和设备类型。
这种方法采用了两个元素：网格容器和网格项目。网格容器是父元素，而网格项目是子元素。父元素被分割成一个或多个行和列（具体取决于你所选择的网格模板），子元素则被放置在定义的行和列中。
让我们看一个例子来更好地理解 CSS Grid 布局的工作：
---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- --------- ----- - ----- - ----------------- ----- -
在上面的例子中，我们首先定义了一个网格容器 .container，并设置它的 display 属性为 grid，以便使用网格布局。
接下来，我们定义了容器内的列和行。 grid-template-columns 属性定义了三列，并使用了 1fr 单位（等分列），grid-template-rows 属性则定义了一行，自适应行高。
最后，我们使用 grid-gap 属性为项目定义了间隔，这样它们在布局过程中能够互不干扰。
下面是一个示意图，它描述了我们的示例布局的外观：
CSS Grid 的基本属性
在学习如何应用 CSS Grid 布局之前，我们需要学习一些基本属性，这些属性对于定义网格布局非常有用。
以下是最常用的属性：
display: grid
这个属性用于标记一个元素是一个网格容器。
---------- - -------- ----- -
grid-template-columns 和 grid-template-rows
使用这两个属性可以分别定义网格容器中的列和行。你可以设置固定的值或者使用 fr 单位来划分每个单元格的盒子。
---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- -
以上示例定义了一个带有三列和一个自适应行高的网格容器。
grid-column-start、grid-column-end、grid-row-start、grid-row-end 和 grid-area
这些单独的属性用于将子元素放置在网格容器中的特定行和列。 但是，我们也可以使用 grid-area 一次性的设置所有这些属性来放置元素。
----- - ---------- - - - - ---- - - ---- -- -
上面的示例中，我们使用 grid-area 将 .item 元素放置在网格容器的顶部两行和前三列。
grid-gap
这个属性用于在网格单元格之间定义间隙，这样可以更容易地在单元格之间进行布局。
---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- --------- ----- -
以上示例定义了一个带有间隔为 10px 的网格布局。
CSS Grid 的高级特性
CSS Grid 具有一些强大的高级特性，这些特性可以大大增强网格布局的灵活性和功能性。
响应式布局
CSS Grid 的另一个有用的特性是响应式布局。 通过使用媒体查询，可以轻松地在不同的屏幕宽度下更改网格的布局。
例如，以下示例在窄屏幕设备上使用两列网格布局，在宽屏幕设备上使用三列网格布局：
------ ------ --- ----------- ------ -
---------- -
---------------------- --- ----
-
-
------ ------ --- ----------- ------ -
---------- -
---------------------- --- --- ----
-
-自动布局
CSS Grid 还可以自动调整网格中的元素。 这对于具有变化的数据类型（例如社交媒体上的动态流）非常有用。
例如，如果我们想在网格容器中显示 9 个项目，但是只有 6 个项目实际上可用，则网格布局可以自动将这些项目填充到容器中。
---------- - -------- ----- ---------------------- ----------------- ------------- ------ --------- ----- -
在上面的示例中，我们定义了一个自适应布局，并使用 grid-template-columns 属性定义了自适应的行高和最小宽度为 200px。
格网调整
最后一个常用的高级功能是网格调整。 这使我们可以在不更改整个布局的情况下调整单个网格单元的大小。
例如，如果我们在网格中有一个元素需要更大一些，则可以使用 grid-row 和 grid-column 属性将其调整为所需的大小。
----- - ------------ - - ---- -- --------- - - ---- -- -
在上面的示例中，我们使用 grid-column 和 grid-row 属性将 .item 元素调整为要跨越两列和两行的宽度。
总结
CSS Grid 布局是一个强大的工具，可以轻松地实现复杂的网页布局。了解这种布局的核心概念和属性是非常重要的，而高级特性可以使布局更加灵活和自适应。在你的下一个项目中尝试使用 CSS Grid 布局，并探究其潜力。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647aef04968c7c53b068846e