网格区域 - CSS

网格区域是CSS3的一部分，它是用于在web页面中创建基于网格布局的区域的工具。网格布局将web页面分割成等宽和等高的网格，使得网页的设计更加规整化和组织化，提高了页面的可读性和可维护性。

创建网格区域

要创建网格区域，需要使用CSS中的 display 属性和 grid-template-columns / grid-template-rows 属性。

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

这个例子中，我们为一个具有3列和2行的网格区域创建了 .container class。该类中的 display 属性设置为 grid，这样就允许我们使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。

在上面的例子中，我们创建了3个等宽列和2个具有特定高度的行，并将它们命名为 .container。

放置元素

一旦我们定义了网格布局，我们就可以使用 grid-column 和 grid-row 属性来放置我们的元素。

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

这个例子中，我们将网格中的 .item 元素放置在第1列和第2列，并且在第1行。

第一行的起始位置是 1，结束位置是 2，这意味着元素从第一列延伸到第二列，占据两列的宽度。 网格布局使用类似于SVG的坐标系，左上角的点为(1,1)。

自动布局

如果你不想手动放置每个元素，CSS提供了一些自动放置元素的功能。自动放置元素是通过使用 grid-auto-columns 和 grid-auto-rows 属性来实现的，代码如下：

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

在上述代码中，我们使用 grid-auto-columns 和 grid-auto-rows 属性来定义在没有手动设置放置的元素时，网格中每个单元格的默认列宽和行高。

响应式布局

当我们创建响应式网站时，网格布局非常有用，因为它允许我们在不同的浏览器大小和不同的设备上自适应页面布局。一个常见的用例是使用媒体查询在不同的屏幕大小之间切换网格布局。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

上述代码中，我们使用 repeat(), auto-fit, minmax() 函数和 grid-gap 属性来定义自适应的网格。

这里，我们使用 repeat() 函数来指定 grid-template-columns 属性，它将以组成一个重复的模式 auto-fit 为单位，单位是一个最小可用空间宽度由 minmax() 函数定义的范围之间的关键字值。

auto-fit关键字使我们能够为其提供的可用空间分配最大数量的网格模板列。这使我们可以自动适应不同的屏幕大小，同时保持最小列宽为200像素，这是 「minmax(200px, 1fr)」 的部分。最后，我们使用 grid-gap 属性来为网格模板添加一个10像素的间距。

总结

以上是CSS中网格区域的简单介绍。 通过 grid-template-columns, grid-template-rows 和 grid-gap 属性，我们可以在不同的网格比例和大小中设置区域、缩放网格区域、放置元素和调整网格区域的大小。这些是网格布局中的一些基本概念，可以使你更好地构建你的web页面布局。

参考文献：

• CSS Grid Layout - A Complete Guide
• Learn CSS Grid