杭州做网站：在CSS网格布局中命名

2019.08.13 mf_web

首次学习如何使用网格布局时，您可以首先通过行号来寻址网格上的位置。这要求您跟踪网格上各行的位置，并且还要注意如果您的站点以从右向左的语言显示，则行号会反转。

杭州做网站然而，建立在这种线系统之上的是能够命名线条甚至网格区域的方法。使用这些方法可以更轻松地按名称而不是数字放置项目，但在创建布局系统时也会带来更多可能性。在本文中，我将深入介绍CSS Grid Layout中命名行和区域的各种方法，以及它创建的一些有趣的可能性。

命名行

我们可以通过命名网格布局上的线来开始。如果您采用下面的示例，我们有一个网格，其中包含六个显式列轨道和一个显式行轨道。项目通过行号放置在此网格上。

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-rows: 20vh ;
  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;}.header {
  grid-row: 1;
  grid-column: 1 / -1;}.sidebar {
  grid-row: 2;
  grid-column: 1 / 3;}.content {
  grid-row: 2;
  grid-column: 3 / -1;}

复制

如果我们想要命名行，我们在轨道列表的方括号内。这里的关键是要记住你命名的是行，而不是后面的轨道。命名行后，您可以在定位项目时交换名称的行号。

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-rows: [header-start] 20vh [header-end] ;
  grid-template-columns: [sidebar-start] 1fr 2fr [sidebar-end] 1fr 2fr 1fr 2fr;}.header {
  grid-row: header-start;
  grid-column: 1 / -1;}.sidebar {
  grid-row: 2;
  grid-column: sidebar-start / sidebar-end;}

您可以为span关键字以外的任何其他名称命名行。由于您将在本文后面发现的原因，最好使用-start开始行的后缀（行或列和-end结束行）命名它们。你可能有main-start和main-end，或者sidebar-start和sidebar-end。

通常，网格的一部分的结束线和另一部分的起始线重合，这不是问题，因为线条可以有多个名称。通过在空格中添加空格来创建多个名称 - 在方括号内。

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-rows: [header-start] 20vh [header-end] ;
  grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end];}.header {
  grid-row: header-start;
  grid-column: full-start / full-end;}.sidebar {
  grid-row: 2;
  grid-column: sidebar-start / sidebar-end;}.content {
  grid-row: 2;
  grid-column: main-start / main-end;}

复制

此示例还演示了您不需要为网格的每一行命名，除了名称之外，您始终还要使用数字。

请参阅笔1.在CodePen上命名事物： rachelandrew（@rachelandrew）的行名。

具有相同名称的行

我们已经看到了行可以有多个名称，但您也可以有多个具有相同名称的行。如果您使用重复记法并在轨道列表中包含命名行，则会发生这种情况。下一个示例创建了六个命名行，交替命名为col-a-start和col-b-start。

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, [col-a-start] 1fr [col-b-start] 2fr);}

复制

如果你使用一个项目col-a-start，它将被放置在第一个实例col-a-start（在这个例子中，这将是网格的第一行）。如果放置它col-b-start，它将定位在网格的第二行。

要定位以后的行，请在行名称后面添加一个数字，以指示您要定位的该行的哪个实例。以下CSS将项目从名为的第二行开始，col-a-start并在名为的第三行结束col-b-start。

.box3 {
  grid-row: 2;
  grid-column: col-a-start 2 / col-b-start 3;}

复制

请参阅笔2.命名事物：CodePen上的rachelandrew（@rachelandrew）使用相同名称的多行。

该规范将此行为描述为“创建一组命名的网格线”，这可以是查看使用多个同名行创建的网格的有用方法。通过添加数字，然后选择要定位的集合中的哪一行。

重新定义响应网格时维护行名称

您是否选择使用行号或命名行完全取决于您。通常，在您希望更改媒体查询中的网格定义的位置，行很有用。您可以拥有始终如一的命名行，而不需要跟踪您在不同断点处放置的行号。然后只需要改变定义而不是项目的定位。

在下面的简单示例中，我为窄宽度定义网格列，然后以550像素的宽度重新定义它们。尽管网格上的线的位置已经改变，但定位的项继续将它们放置在相同的命名行上。

见笔3事物命名：重新命名线的位置由rachelandrew（@rachelandrew）上CodePen。

命名区域

到目前为止，我们已经很好地了解了命名行，但是，还有另一种在网格上命名的方法。我们可以命名网格区域。

网格区域是由一个或多个网格单元组成的矩形区域。该区域由四条网格线定义，用于标记列和行的起始行和结束行。

我们使用grid-template-areas属性命名网格区域。此属性采用一些不寻常的值（一组字符串，每行一个），用ascii-art样式描述我们的布局。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr 2fr) ;
  grid-template-areas: "head head head head head head""side side main main main main""foot foot foot foot foot foot";}

复制

我们在字符串中使用的名称使用属性grid-template-areas分配给网格的直接子元素grid-area。用于分配名称时此属性的值是所谓的自定义标识符，因此不应引用它。

.header {
  grid-area: head;}.sidebar {
  grid-area: side;}.content {
  grid-area: main;}.footer {
  grid-area: foot;}

复制

每当我们将布局描述为值时grid-template-areas，它将导致一个区域覆盖网格的多个单元格，我们沿着行或列向下重复标识。创建的区域必须是完整的矩形 - 没有L或T形区域。您也可以仅为每个名称创建一个矩形区域 - 无法使用断开连接的区域。规范确实注意到：

“在此模块的未来版本中可能允许使用非矩形或断开连接的区域。”
- grid-template-areas-property

在创建网格描述时，我们还需要创建网格的完整表示，否则整个声明将被丢弃为无效。这意味着需要填充网格的每个单元格。

grid-template-areas: "head head head head head head""side side main main main main""foot foot foot foot foot foot";}

复制

由于您可能希望在设计中将某些单元格留空，因此规范定义了一个完整停靠字符.或一个....没有空格的序列作为空单元格标记。

  grid-template-areas: "head head head head head head""side side main main main main""....... ....... foot foot foot foot";}

复制

请参阅笔4.命名事项：网格模板区域由rachelandrew（@rachelandrew）在CodePen上。

如果您尚未下载Firefox Nightly以便从Firefox DevTools网格检查器的所有最新功能中受益，我建议您在使用命名区域时这样做。

Firefox中的Grid Inspector演示了命名区域 — Firefox中的“Grid Inspector”演示命名区域。（大预览）

从命名行来到地区

现在我们来到这个命名乐趣的一个有趣的部分。您可能还记得，当我们查看命名行时，我建议您使用结束行的约定，该行开始一个区域-start和结束行-end。这样做的原因是，如果你命名这样的行，你将得到一个主要名称的命名区域，你可以通过给它一个名称来定位项目grid-area; 与grid-template-areas通过使用分配ident来定位项目的方式相同grid-area。

在下面这个例子中，我命名行和列线panel-start和panel-end。这将给我一个名为的命名区域panel。如果我将其指定为grid-area我页面上元素的值，它将被放置在由这些行定义的区域中。

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr  [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr;
  grid-template-rows: 10vh [panel-start] minmax(200px, auto) 10vh [panel-end];
  grid-template-areas: 
 "head head head head head head"  
 "side side main main main main" 
 ".... .... foot foot foot foot";}.panel {
  grid-area: panel;}

复制

请参阅笔5.命名事项：命名行由CodePen上的rachelandrew（@rachelandrew）命名。

来自命名区域来线

我们也可以执行上述相反的操作，并使用从命名区域创建的行。每个区域使用相同-start和-end约定创建四个命名行。如果您有一个名为的区域main，那么您有行线main-start，main-end开始和结束行线，列线main-start以及main-end起始和结束列线。然后，您可以使用基于行的放置和命名行来定位项目。

在这个例子中，我使用这些创建的命名行来定位覆盖面板。

.grid {
  display: grid;
  grid-template-areas: 
 "head head head head head head"  
 "side side main main main main" 
 ".... .... foot foot foot foot";}.panel {
  grid-column: main-start / main-end;
  grid-row: head-start / foot-end;}

复制

请参阅笔6.命名事项：命名区域由CodePen上的rachelandrew（@rachelandrew）命名。

线名等效于区域名称

除了开始和结束的行名称之外，还为使用主名称的任何命名网格区域的起始边创建一条线。因此，如果您有一个被调用的区域main，您可以使用ident main作为grid-row-start或的值，grid-column-start并且内容将从该区域的起始行开始。如果您使用的值为grid-row-end或grid-column-end，则选择该区域的结束行。在下面的例子中，我拉伸从开始覆盖面板的main向的端部main为列，并且开始main和结束foot的行。

.panel {
  grid-column: main;
  grid-row: main / foot ;}

复制

请参阅笔7.命名事项：在CodePen上由rachelandrew（@rachelandrew）等同于区域名称的行名称。

网格区域属性解释

要结束所有这些神奇的线路业务，了解一些事情也很有用grid-area。基本上我们在使用grid-area身份时所做的main是定义该区域的所有四行。有效值grid-area也是使用行号。

.main {
  grid-area: 2 / 1 / 4 / 3;}

复制

这与写作相同：

.main {
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 3;}

复制

当你设置：

.main {
  grid-area: main;}

复制

这真的是：

.main {
  grid-area: main / main / main / main ;}

复制

grid-area使用自定义标识而不是数字时，属性的行为略有不同。如果您使用行号作为起始值grid-area，则未设置的任何结束行号将设置为auto，因此将使用网格自动放置来确定放置项目的位置。

但是，如果使用自定义标识并省略某些行，则缺少的行设置如下。

设置三个行名称

.main {
  grid-area: main / main / main ;}

复制

如果设置三个行名称，那么基本上就缺少了grid-column-end。如果grid-column-start是自定义标识，则grid-column-end也设置为该标识。正如我们已经看到的，-end当使用主名称来设置一条线时，属性将使用区域的结束边缘，因此使用grid-column-start和grid-column-end设置相同的名称，内容将覆盖该区域的列。

设置两个行名称

.main {
  grid-area: main / main  ;}

复制

只设置了两个名称，您将设置行和列起始行。如果grid-column-start是自定义标识，则grid-column-end也设置为该标识。如果grid-row-start是自定义标识，grid-row-end则将设置为该标识。

设置一个行名称

.main {
  grid-area: main  ;}

复制

设置一个行名称是您设置grid-area为您所在区域的主要名称时所执行的操作。在这种情况下，所有四行都设置为该值。

注意：这适用于 grid-column 和 grid-row，太。

这种技术本质上意味着您可以在网格上定位一组行来放置项目。正如-end值grid-area被设置为与它们被省略时的起始值相同的索引一样，grid-column和的结束值也是如此grid-row。这意味着您可以main使用以下方法在开始和结束列行之间放置项目：

.main {
  grid-column: main  ;}

复制

在博客文章Breaking Out with CSS Grid中，我展示了如何使用此功能创建一个有限的全宽区域设计模式，突破受限制的内容区域。

网格可以有很多命名行！

所有上述意味着网格最终会有大量命名行。在大多数情况下，您无需担心这一点。选择你想要使用的那些并忽略其他人的事实。他们只会静静地坐着他们的名字，导致你和你的布局没有任何问题。

命名grid和grid-template短缺

CSS Grid Layout有两个简写，可以在一个紧凑的语法中使用许多网格属性。就个人而言，我觉得这很难读。当我与其他开发者讨论这个问题时，意见分歧 - 有些人喜欢它，而其他人宁愿使用个别属性。看看你看到哪个阵营！与所有短片一样，要记住的关键是当您使用速记时，您不使用的属性将被重置。

该grid-template速记：创建显式网格

您可以使用grid-template简写一次设置所有显式网格属性。

grid-template-columnsgrid-template-rowsgrid-template-areas

复制

这意味着您可以在一个中定义命名行和命名区域。要创建组合命名区域和行的语法，我将首先定义您的grid-template-areas值，如上一节所述。

然后，您可能想要添加行名称。它们放在每个字符串的开头和结尾 - 记住一个字符串代表一行。行名称需要在方括号内，就像在命名行中时一样，grid-template-rows并且应该在包含定义行的字符串的引号之外。

我在代码示例中命名了两行行：panel-start在标题行（网格的第2行）之后，而panel-end在结束页脚行（在我们的三行轨迹网格的第4行）之后。我还为命名和未命名的行定义了行跟踪大小，在该行的字符串后面添加了值。

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto)".... .... foot foot foot foot"  10vh [panel-end];}

复制

如果我们还想命名列，我们不能在字符串中这样做，所以我们需要添加一个/分隔符，然后定义我们的列轨道列表。我们将这些行命名为与此列表的值相同的方式grid-template-columns。

.grid {  
  display: grid;
  grid-gap: 20px;
  grid-template: " head head head head head head" 10vh[panel-start] "side side main main main main" minmax(200px, auto)".... .... foot foot foot foot" 10vh  [panel-end]/ [full-start ] 1fr  [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end];}

复制

在这个示例中，您可以在下面的codepen中看到，我正在为行和列创建一组额外的行，这些行定义了一个名为panelI has I使用了panel-start和panel-end语法的区域。所以我可以通过给它一个grid-area值来放置一个项目panel。

这看起来很乍一看，但是我们在这里做的是创建一个列表，列出上面的ascii-art定义。如果需要，可以在所有内容之间小心地添加空格，以使模板区域和模板列定义对齐。

请参阅Pen 8.命名事项：CodePen上rachelandrew（@rachelandrew）的网格模板简写。

该grid速记：显性和隐性电网

规范建议除非你想单独定义隐式网格，否则你应该使用grid而不是grid-template速记。该grid速记将重置所有你没有设置隐含值。所以这个简写允许设置，并重置以下属性：

grid-template-columnsgrid-template-rowsgrid-template-areasgrid-auto-columnsgrid-auto-rowsgrid-auto-flow

复制

出于我们的目的，使用grid速记看起来与使用grid-template速记相同，因为我们正在创建显式网格定义。唯一的区别是重置grid-auto-*属性。的grid速记可以被用来设置所述显式格-复位隐式属性，或隐式格-搁置在明确的特性。一次做两件事都没有多大意义！

.grid {  
  display: grid;
  grid-gap: 20px;
  grid: " head head head head head head" 10vh[panel-start] "side side main main main main" minmax(200px, auto)".... .... foot foot foot foot" 10vh  [panel-end]/ [full-start ] 1fr  [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end];}

复制

注意：在CSS Grid规范的初始候选推荐中，此简写也会重置gutter属性grid-column-gap和grid-row-gap。但是，这已经改变了。浏览器正在更新它们的实现，但在编写本文时，您可能会发现在使用此简写时间隙属性被重置为0，因此您需要在之后定义它们。

我应该使用哪种方法？

您可能想知道，对于任何给定的任务，最好使用哪种方法。嗯，没有严格的规则。就个人而言，我喜欢grid-template-areas在我的模式库中工作时使用组件。很高兴在CSS中看到组件的形状grid-template-areas在测试组件时，可以轻松尝试不同的布局。我发现的一点是，由于它很容易移动，所以检查你没有断开组件的视觉和逻辑顺序是非常重要的。用键盘导航您的站点的用户，在项目之间进行选项卡将遵循源中定义的元素的顺序。一旦确定了显示内容的最佳方式，请确保不要忘记重新安排源。有关此问题的更多信息，我建议您阅读CSS网格布局和辅助功能。

我发现我倾向于使用命名行来布局的较大部分，在主页面网格上我可能会为不同的布局放置不同类型的组件。话虽如此，我仍然在探索如何最好地在生产中使用网格 - 可能就像其他人一样。几年来，我一直在创建小例子和玩这些想法，但最近我才能在真实网站上使用这些技术。尽量不要挂在“正确”或“错误”的东西上。如果您发现方法令人困惑，或者它似乎无法在您的上下文中工作，则只需不要使用它。这样做的好处在于我们可以选择对我们正在进行的项目最有意义的方法。而且，如果您根据经验为自己的项目提出了一些指导原则，请将其写下来。