白骑士的CSS教学语法基础篇之布局 2.5.4 Grid布局

系列目录​​​​​​​

上一篇：白骑士的CSS教学语法基础篇之布局 2.5.3 Flexbox布局

        Grid 布局是 CSS3 中引入的一种强大的二维布局模型，用于创建复杂的网页布局。与 Flexbox 布局主要用于一维布局不同，Grid 布局允许在两个维度（行和列）上同时进行布局控制，使其能够处理更复杂的布局结构。Grid 布局包括两个主要部分：Grid 容器（Grid Container）和 Grid 项目（Grid Items）。下面，我们将详细介绍 Grid 布局的基本概念、容器属性和单元格属性。

Grid布局的基本概念

        Grid 布局的核心思想是将容器分成一个网格系统，允许开发者在网格的行和列中定位和对齐项目。这种布局方法特别适合用于处理复杂的页面结构，如报纸布局、网格布局等。

        网格线和网格单元：

• 网格线：在行和列之间的线条，用于确定项目的起始和结束位置。
• 网格单元：网格线所围成的区域，可以将项目放置在这些区域内。

        网格区域：

• 网格区域：由多个网格单元组成的区域，可以跨越多个行和列。

Grid容器属性

‘display: grid;‘

        将容器设为 Grid 容器，使其子元素成为 Grid 项目。

        示例：

.container {
  display: grid;
}

‘grid-templ