了解下grid布局

CSS Grid 是一种强大的布局系统，可以用来创建复杂的网格布局。它为我们提供了更灵活、更强大的方式来排列元素，而不仅仅是传统的行和列布局。

CSS Grid 是由一个父元素和多个子元素组成的。我们可以在父元素上定义一个网格布局，然后将子元素放入网格中的单元格中。通过使用网格线和网格轨道，我们可以轻松地定义网格的结构，使其适应不同的设备和屏幕尺寸。

下面是一个基本的 CSS Grid 布局示例：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
}

这个布局将父元素 .container 转换为网格布局，并定义了三个列和两行。1fr 表示每个列都应该占用可用宽度的三分之一。100px 表示每行应该有 100 像素的高度。gap 属性定义了行和列之间的间隔。

现在，我们可以将子元素 .item 放入这个网格布局中。我们可以使用 grid-row 和 grid-column 属性将它们放入不同的单元格中：

.item-1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.item-2 {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

.item-3 {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
}

.item-4 {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

在上面的代码中，我们将 .item-1 放入第一行的第一列，.item-2 放入第一行的第二列到第四列，.item-3 放入第二行的第一列到第三列，.item-4 放入第二行的第三列。

使用 CSS Grid，我们可以轻松地创建复杂的网格布局。我们可以使用自动布局、命名网格线、跨越多个行和列、合并单元格等功能来进一步扩展和控制我们的布局。

常用场景

1、网格布局

CSS Grid 最明显的用途就是创建网格布局。我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义列和行，然后使用 grid-row 和 grid-column 属性将元素放入网格中的单元格中。这种布局适用于多种不同的场景，例如博客、新闻、产品展示等。

2、响应式布局

CSS Grid 可以轻松地创建响应式布局。我们可以使用 @media 查询来定义不同的网格布局，以便在不同的屏幕尺寸下提供最佳的用户体验。这种布局适用于需要在不同设备上呈现的复杂页面或应用程序。

3、合并单元格

CSS Grid 还支持将多个单元格合并为一个单元格。我们可以使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 属性来控制合并的单元格。这种布局适用于需要将多个相关元素组合成一个单元格的场景，例如日历、表格等。

4、自适应布局

CSS Grid 还支持自适应布局。我们可以使用 grid-template-columns 和 grid-template-rows 属性中的 auto-fit 和 auto-fill 值，以及 minmax() 函数来创建自适应的网格布局。这种布局适用于需要适应不同的内容大小和屏幕尺寸的场景，例如图片库、相册等。

总之，CSS Grid 可以用于许多不同的场景，它可以使我们更轻松地创建复杂的网格布局，并提供灵活的方式来控制元素的位置和大小。