使用命名网格线进行布局 | CSS Grid Layout: Layout using Named Grid Lines

CSS Grid Layout: Layout using Named Grid Lines

在以前的指南中，我们已经研究了如何根据定义网格轨道创建的行放置项目，以及如何使用命名模板区域放置项目。在本指南中，我们将研究这两件事在使用命名行时是如何一起工作的。行命名是非常有用的，但是一些看起来更令人困惑的网格语法来自于这种名称和跟踪大小的组合。一旦你完成了一些例子，它应该变得更清晰和更容易使用。

定义网格时命名行

当您使用grid-template-rows 和grid-template-columns属性定义网格时, 可以为网格中的部分或全部行指定名称。为了演示, 我将使用在基于线的布局指南中创建的简单版式。这一次, 我将使用命名行创建网格。

在定义网格时，我将我的行命名为方括号。这些名字可以是你喜欢的任何东西。我已经为开始和结束容器定义了一个名称，包括行和列。然后将网格的中心块定义为content-start和content-end同样，对于列和行，尽管不需要命名网格中的所有行，但都是如此。您可以选择只为布局指定一些关键行。

.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

一旦行有了名称，我们就可以使用名称来放置项目，而不是行号。

.box1 {
  grid-column-start: main-start;
  grid-row-start: main-start;
  grid-row-end: main-end;
}

.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;
}

.box3 {
  grid-column-start: content-start;
  grid-row-start: main-start;
}

.box4 {
  grid-column-start: content-start;
  grid-column-end: main-end;
  grid-row-start: content-end;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

关于基于行的布局的所有其他东西仍然以相同的方式工作，您可以混合命名行和行号。在创建响应性设计时，在重新定义网格时，命名行非常有用，而不是需要通过更改媒体查询中的行号来重新定义内容位置，您可以确保在定义中始终将行命名为相同的。

给行多个名称

您可能需要给出一个多个名称的行，例如，它可能表示侧边栏末端和主开始。要做到这一点，在方括号中添加名称，在它们之间加上空格。[sidebar-end main-start]然后，您可以用任何一个名称来引用这一行。

从命名线隐式网格区域

在命名这些行时，我提到了你可以给这些名字命名任何你喜欢的。名称是习惯身份一个作者定义的名字。在选择名称时，您需要避免出现在规范中并可能引起混淆的单词，例如span.不引用身份证明。

当您可以选择任何名称时，如果您附加-start和-end对于围绕一个区域的行，正如我在上面的示例中所做的那样，网格将创建一个主名称的命名区域。以上面的例子为例content-start和content-end行和列都是。这意味着我得到一个网格区域content如果我愿意的话可以在那个区域放点东西。

我正在使用与上面相同的网格定义，但是这次我要把一个单独的项目放到指定的区域content。

.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}
.thing {
  grid-area: content;
}

<div class="wrapper">
  <div class="thing">I am placed in an area named content.</div>
</div>

我们不需要确定我们的区域在哪里grid-template-areas因为我们的命名线为我们创造了一个区域。

来自命名区域的隐式网格线

我们已经看到了命名行是如何创建一个命名区域的，这也是相反的。命名模板区域创建可用于放置项目的命名行。如果我们采用在“网格模板区域指南”中创建的布局，我们可以使用我们的区域创建的行来查看这是如何工作的。

在本例中，我添加了一个额外的div，其中包含一个overlay.我们已经命名了使用grid-area属性中创建的布局。grid-template-areas.地区名称如下：

hd

ft

main

sd

这给了我们列和行的行：

hd-start

hd-end

sd-start

sd-end

main-start

main-end

ft-start

ft-end

您可以在图像中看到指定的行，请注意，有些行有两个名称-例如sd-end和main-start请参考同一列行。

就位overlay使用这些隐式命名行与使用我们已命名的行定位项目相同。

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr
  grid-auto-rows: minmax(100px, auto
  grid-template-areas: 
    "hd hd hd hd   hd   hd   hd   hd   hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft   ft   ft   ft   ft   ft";
}

.header {
  grid-area: hd;
}

.footer {
  grid-area: ft;
}

.content {
  grid-area: main;
}

.sidebar {
  grid-area: sd;
}

.wrapper > div.overlay {
  z-index: 10;
  grid-column: main-start / main-end;
  grid-row: hd-start / ft-end;
  border: 4px solid rgb(92,148,13
  background-color: rgba(92,148,13,.4
  color: rgb(92,148,13
  font-size: 150%;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
  <div class="overlay">Overlay</div>
</div>

考虑到我们有定位、从命名区域创建线和从命名线创建区域的能力，在开始创建网格布局时，需要花一点时间来规划您的命名策略。通过选择对您和您的团队有意义的名称，您将帮助每个人更容易地使用您创建的布局。

与repeat（）具有相同名称的多行

如果您想要给网格中的所有行一个唯一的名称，那么您需要长时间写出轨道定义，而不是使用重复语法，因为在定义轨道时，需要将名称添加到方括号中。如果您确实使用了重复语法，那么您将得到多行同名的行，但是这也非常有用。

在下一个例子中，我创建了一个具有十二个等宽列的网格。在定义列轨道的1fr大小之前，我还定义了一个行名称[col-start]。这意味着我们最终会得到一个网格，它有12列线，都col-start在1fr宽度列之前命名。

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr
}

一旦创建了网格，就可以将项目放置到网格上。因为我们有多行名为col-start如果您将一个项目放在一行后开始col-start网格使用第一行名为col-start，在我们的例子中，这将是最左翼的路线。若要寻址另一行，请使用名称，加上该行的编号。要将我们的项目从第一行col-start放到第五，我们可以使用：

.item1 {
  grid-column: col-start / col-start 5
}

您还可以使用span关键字在这里。我的下一项将放在名为第七行的col-start跨越三条线。

.item2 {
  grid-column: col-start 7 / span 3;
}

<div class="wrapper">
  <div class="item1">I am placed from col-start line 1 to col-start 5</div>
  <div class="item2">I am placed from col-start line 7 spanning 3 lines</div>
</div>

如果您查看Firefox Grid荧光笔中的这个布局，您可以看到列行是如何显示的，以及我们的项是如何放置在这些行中的。

重复语法也可以采取跟踪列表, 它不只是需要是一个单一的轨道大小, 正在重复。下面的代码将创建一个八个轨道的网格，一个较窄的1fr宽度列命名col1-start后跟一个更宽的3fr列命名col2-start。

.wrapper {
  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr
}

如果重复语法将两行放在一起，那么它们将被合并，并创建与在非重复轨道定义中给行多个名称相同的结果。下面的定义创建了四个1fr轨道，每个轨道都有一个开始和结束线。

.wrapper {
  grid-template-columns: repeat(4, [col-start] 1fr [col-end] 
}

如果我们不使用重复表示法写出这个定义，它将如下所示。

.wrapper {
  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
}

如果您使用了轨道列表，则可以使用span关键字不仅要跨越多行，而且要跨若干特定名称的行。

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr
}

.item1 {
  grid-column: col1-start / col2-start 2
}

.item2 {
  grid-row: 2;
  grid-column: col1-start 2 / span 2 col1-start;
}

<div class="wrapper">
  <div class="item1">I am placed from col1-start line 1 to col2-start line 2</div>
  <div class="item2">I am placed from col1-start line 2 spanning 2 lines named col1-start</div>
</div>

在过去的三个指南中，您发现有很多不同的方法可以使用网格来放置项目。这在一开始看起来有点过于复杂，但请记住，您不需要使用所有这些。在实践中，我发现对于简单的布局，使用命名模板区域很好，它给出了布局外观的良好的视觉表示，然后就很容易在网格上移动东西。

例如，如果使用严格的多列布局，本指南最后部分中的命名行演示非常有效。如果您考虑网格系统，比如那些在Foundation或Bootstrap之类的框架中发现的网格系统，这些系统是基于12列网格的。然后，框架导入代码来完成所有的计算，以确保列加为100%。对于网格布局，网格“框架”所需要的唯一代码是：

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12, [col-start] 1fr
}

然后我们可以使用这个框架来布局我们的页面。例如，要创建具有页眉和页脚的三列布局，我可能有以下标记。

<div class="wrapper">
  <header class="main-header">I am the header</header>
  <aside class="side1">I am sidebar 1</aside>
  <article class="content">I am the main article</article>
  <aside class="side2">I am sidebar 2</aside>
  <footer class="main-footer">I am the footer</footer>
</div>

然后，我可以把这个放在我的网格布局框架中，就像这样。

.main-header,
.main-footer  {
  grid-column: col-start / span 12;
}

.side1 {
  grid-column: col-start / span 3;
  grid-row: 2;
}

.content {
  grid-column: col-start 4 / span 6; 
  grid-row: 2;
}

.side2 {
  grid-column: col-start 10 / span 3;
  grid-row: 2;
}

再一次，网格高亮笔有助于我们向我们展示我们如何将我们的项目放在工作上。

这就是我需要的。我不需要做任何计算，在将空间分配给1fr列轨道之前，网格会自动移除我的10像素分隔线轨道。当你开始构建你自己的布局时，你会发现对语法变得更加熟悉，然后你就能选择最适合你的方式以及你想要构建的项目类型。尝试用这些不同的方法建立一些共同的模式，你很快就会找到最有效的工作方式。然后，在下一个指南中，我们将看看网格如何为我们定位项目 - 我们无需使用展示位置属性！