【CSS】初学了解Grid布局

什么是Grid布局

Grid布局是一种二维的布局系统，它允许我们在水平和垂直方向上同时控制网格中的项目位置。通过将页面划分为行和列，我们可以轻松地创建出复杂的布局结构，而不需要复杂的嵌套和计算。

如何开始使用Grid布局

要使用Grid布局，首先需要将容器设置为Grid容器。在CSS中，只需将容器的 display 属性设置为 grid 即可：

.container {
  display: grid;
}

这样，容器内的子元素就可以使用Grid布局了。`

Grid容器的属性

Grid布局提供了一系列属性来控制Grid容器内子元素的排列方式。以下是一些常用的Grid容器属性：

• grid-template-columns：定义网格的列。
• grid-template-rows：定义网格的行。
• grid-template-areas：定义网格的区域。
• grid-gap：定义网格之间的间距。
• justify-items：控制项目在单元格内的水平对齐方式。
• align-items：控制项目在单元格内的垂直对齐方式。

Grid项目的属性

除了Grid容器属性之外，Grid项目（即容器内的子元素）也有一些属性可供使用：

• grid-column：定义项目所占的列。
• grid-row：定义项目所占的行。
• grid-area：定义项目所占的区域。

举个例子

让我们通过一个简单的示例来演示Grid布局的应用。假设我们有一个容器，里面有四个项目，我们希望它们按照2x2的网格排列。我们可以这样做：

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 100px);
}

.item {
  border: 1px solid black;
}

通过将容器的 display 属性设置为 grid，并设置 grid-template-columns 和 grid-template-rows 来定义网格的列和行，我们成功地将项目按照2x2的网格排列。