快速提示：以防万一，命名CSS网格线

最新推荐文章于 2024-10-17 10:27:13 发布

daique1908

最新推荐文章于 2024-10-17 10:27:13 发布

阅读量132

点赞数

文章标签： java python javascript css html ViewUI

在任何CSS网格中，每一行都有一个索引号，我们可以参考该索引号来放置网格项。但是，我们还可以命名每条网格线，从而更轻松地使用和维护网格布局。让我们来看看！

网格来了

对于任何Grid教程，最常见的回答是“但是什么时候可以使用它？” 这是一个公平的问题。事实是：电网来了，而且很快就会在这里。

“ 2017年3月，Chrome和Firefox将默认支持CSS Grid。” – 埃里克·梅耶（ Eric Meyer）

网格线号

当我们声明一个网格时，每一行都有一个索引号：

注意：除非布局的direction: rtl;设置为direction: rtl; ，这些数字从网格的左上角开始，一直到右下角。

我们可以参考这些数字来放置网格项：

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

在此示例中，我们的.item元素位于第2行和第3行：

显式网格线名称

对于更复杂的网格，您可以想象通过数字引用所有内容可能会有些混乱。因此，当我们声明网格的列和行时，Grid模块允许我们显式命名线。

让我们使用一个示例，就像我们在本系列中使用的示例一样。这是我们基本的3×3网格声明：

.grid-1 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 60px 130px 50px;
  grid-gap: 20px;
}

现在，我们可以使用方括号将行的列和行值包装起来（无论我们想要的是什么）。

.grid-1 {
  display: grid;
  grid-template-columns: [start] 100px [centre-start] auto [last-column-start] 100px [finish];
  grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end];
  grid-gap: 20px;
}

现在，我们可以使用名称而不是数字来定位项目：

.item {
  grid-column: centre-start;
  grid-row: header-start;
}

一些指针：

这些名称可以根据您自己的描述需求量身定制，因此请从逻辑上考虑可以帮助您识别和记住网格区域的内容。
原始行号保持运行，因此您仍然可以使用它们。
您可以为一行声明多个名称，例如： [main-end footer-start row-5]等。
即使您为网格线命名，也没有义务使用它们，所以这是一个很好的“以防万一”的习惯。

隐式网格线名称

当我们故意做事时，例如命名网格线，那是明确的 。如果暗含但没有直接声明，则称为隐式。我们已经明确介绍了网格线的命名，但是在某些情况下，会隐式给线命名。

我们可以这样定义四个网格区域：

.grid-1 {
    /* ..existing styles */
     
    grid-template-areas:    "header header header"
                            "main main sidebar"
                            "footer footer footer";
}

这给我们以下内容：

命名网格区域header也会自动为其四个边界线分配名称。它周围的行变成header-start和header-end ，同样，两列也变成header-start和header-end 。其他区域也是如此，这些区域的行名分别为main-start ， main-end ， sidebar-start等。

注意：反向来看，以相同格式（ header-start和header-end ）显式添加命名行将创建header的命名网格区域。

我们可以像以前一样使用这些行名来定位项目。同样，它们除了您定义的任何名称和原始行索引号之外，还存在。