网格模板区 | CSS Grid Layout: Grid Template Areas

在前指南我们研究了网格线，以及如何在这些行中定位项目。当您使用CSSGrid布局时，您总是有行的，这可以是一种简单的将项放置在网格中的方法。但是，有一种替代方法可用于在网格上定位项目，可以单独使用，也可以与基于行的放置结合使用。此方法涉及使用命名模板区域放置项，我们将确切地了解该方法是如何工作的。您将很快看到为什么我们有时称之为网格布局%21的ascii-art方法。

命名网格区域

您已经遇到了grid-area。这是一个属性，它可以将用于定位网格区域的所有四条线作为值。

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

在定义所有四条线时，我们要做的是通过指定包围该区域的线来定义区域。

我们也可以定义一个区域，方法是给它一个名称，然后在grid-template-areas财产。你可以选择你想要给你的区域命名的东西。例如，如果我希望创建如下所示的布局，我可以确定四个主要区域。

• 标题

• 脚

• 侧边栏

• 主要内容

带着grid-area属性可以为这些区域中的每一个指定名称。这还不会创建任何布局，但我们现在已经指定了要在布局中使用的区域。

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

定义了这些名称之后，我就创建了我的布局。这一次，我没有使用项目本身指定的行号来放置项目，而是在网格容器上创建整个布局。

.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";
}

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

使用这种方法，我们不需要在单个网格物品上指定任何东西，所有事情都发生在我们的网格物品容器上。我们可以将布局描述为grid-template-areas属性的值。

将网格单元留空

在这个例子中，我们已经完全填充了我们的网格，没有留下空白区域。但是，您可以使用此布局方法将网格单元留空。要将单元格留空，请使用句号“ .'。如果我只想直接在主要内容下显示页脚，则需要将侧栏下方的三个单元格留空。

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

.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";
}

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

为了使布局更整洁，我可以使用多个.字符。只要之间没有空白，它就会被计为一个单元格。对于复杂的布局，将行和列整齐排列是有好处的。这意味着你可以在CSS中看到这个布局的样子。

跨越多个单元格

在我们的例子中，每个区域跨越多个网格单元格，我们通过多次重复该网格区域的名称来实现这一点，其间具有空白区域。您可以添加额外的空白，以保持您的列排列整齐的值grid-template-areas。你可以看到，我已经这样做了，hd并ft和main。

通过链接区域名称创建的区域必须是矩形的，此时无法创建L形区域。规范确实注意到未来的级别可能会提供此功能。但是，您可以像列一​​样容易地跨行。例如，我们可以让我们的侧边栏通过更换跨越到页脚的末尾.用sd。

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

.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"
      "sd sd sd  ft  ft   ft   ft   ft   ft";
}

grid-template-areas的值必须显示一个完整的网格, 否则它是无效的 (并且该属性被忽略)。这意味着每行的单元格数必须相同, 如果为空, 则显示一个完全停止字符, 表明该单元格将留空。如果您的区域不是矩形的, 也将创建无效的网格。

使用媒体查询重新定义网格

由于我们的布局现在包含在CSS的一部分中，这使得在不同断点上进行更改变得非常容易。您可以通过重新定义网格、网格中项的位置，或者同时定义两者来实现这一点。

在执行此操作时，请在任何媒体查询之外为您的区域定义名称。这样，内容区域将始终被调用。main不管它在网格上的位置是什么。

对于上面的布局，我们可能希望在窄宽度上有一个非常简单的布局，定义一个单一的列网格并堆叠我们的项目。

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

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

然后，我们可以在媒体查询中重新定义这个布局，以转到我们的两列布局，如果可用空间更宽，也许将其转换为三列布局。请注意，对于广泛的布局，我保留我的九列轨道网格，我重新定义项目放置在哪里使用grid-template-areas。

@media (min-width: 500px) {
    .wrapper {
        grid-template-columns: repeat(9, 1fr);
        grid-template-areas: 
          "hd hd hd hd   hd   hd   hd   hd   hd"
          "sd sd sd main main main main main main"
          "sd sd sd  ft  ft   ft   ft   ft   ft";
    }
}
@media (min-width: 700px) {
    .wrapper {
        grid-template-areas: 
          "hd hd hd   hd   hd   hd   hd   hd hd"
          "sd sd main main main main main ft ft";
    }
}

针对UI元素使用grid-template-areas

您将在网上找到的许多网格示例都假设您将使用网格进行主页布局，但是网格对于小元素和大元素也同样有用。使用grid-template-areas特别好，因为在代码中很容易看到元素的样子。

作为一个非常简单的例子，我们可以创建一个“媒体对象”。这是一个组件，一边是图像或其他媒体的空间，另一边是内容。图像可能显示在框的右侧或左侧。

我们的网格是一个两列轨道网格，图像的列大小为1fr以及文本3fr如果您想要一个固定宽度的图像区域，则可以将图像列设置为像素宽度，并分配文本区域。1fr.单列轨道1fr然后占据剩下的空间。

我们给图像区域一个网格区域名称img和文本区域content，然后我们可以使用这个grid-template-areas属性把它们打出来。

* {box-sizing: border-box;}

.media {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 400px;
}
.media {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "img content";
    margin-bottom: 1em;
}

.media .image {
    grid-area: img;
    background-color: #ffd8a8;
}

.media .text {
    grid-area: content;
    padding: 10px;
    
}

<div class="media">
    <div class="image"></div>
    <div class="text">This is a media object example. 
      We can use grid-template-areas to switch around the image and text part of the media object.
    </div>
</div>

在框的另一侧显示图像

我们可能希望能够通过其他方式显示我们的图像。要做到这一点，我们重新定义网格把1fr轨道放在最后，并简单地将值移动grid-template-areas。

* {box-sizing: border-box;}

.media {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 400px;
}
.media {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "img content";
    margin-bottom: 1em;
}

.media.flipped {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "content img";
}

.media .image {
    grid-area: img;
    background-color: #ffd8a8;
}

.media .text {
    grid-area: content;
    padding: 10px;
    
}

<div class="media flipped"> 
    <div class="image"></div> 
    <div class="text">This is a media object example.
      We can use grid-template-areas to switch around the image and text part of the media object.
    </div>
</div>

网格定义速记

查看了在网格上放置项目的各种方法以及用于定义网格的许多属性之后，现在是时候看一下几个可用于定义网格的简写以及许多关于它的内容CSS的行。

对于其他开发人员，甚至是您未来的自我，这些内容很快就会变得难以阅读。但是，它们是规范的一部分，您可能会在示例中或其他开发人员使用时遇到它们，即使您选择不使用它们。

在使用任何速记之前，值得记住的是，速记不仅可以一次性设置多个属性，还可以复位物它们的初始值，您没有设置，也不能在速记中设置。因此，如果你使用速记，要注意它可能会重置你在其他地方申请过的东西。

网格容器的两个shorthands是显式网格速记grid-template和网格定义速记grid。

grid-template

该grid-template属性设置以下属性：

• grid-template-rows

• grid-template-columns

• grid-template-areas

该属性被称为显式网格速记，因为它设置的是在定义显式网格时控制的内容，而不是影响可能创建的任何隐式行或列跟踪的内容。

下面的代码创建一个布局，使用grid-template-areas这与本指南前面创建的布局相同。

.wrapper {
    display: grid;
    grid-template: 
      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
      "sd sd sd main main main main main main" minmax(100px, auto)
      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;           
}

第一个值是我们的grid-template-areas值，但我们也在每一行的末尾声明行的大小。这就是minmax(100px, auto)正在做。

之后grid-template-areas我们有一个正斜杠，之后是一个列轨道的显式轨道列表。

grid

grid速记更进了一步，并且还设置由隐式网格使用的属性。所以你会设置：

• grid-template-rows

• grid-template-columns

• grid-template-areas

• grid-auto-rows

• grid-auto-columns

• grid-auto-flow

该属性还将grid-gap属性重置为 0, 但不能指定此速记中的间隙。

您可以使用与grid-template速记的方式完全相同的语法, 只是要知道, 这样做时, 您将重置属性设置的其他值。

.wrapper {
    display: grid;
    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;           
}

我们将在后面的指南中重新讨论这个速记提供的其他功能，当我们查看自动布局和网格-自动流属性时。

如果您已经完成了这些初始指南，您现在应该可以使用基于行的放置或命名区域来创建网格布局。花一些时间用网格来构建一些常见的布局模式，而有许多新术语要学，语法相对简单。在你开发例子的时候，你可能会想出一些我们还没有涉及的问题和用例。在这些指南的其余部分中，我们将看到规范中包含的更多细节 - 以便您可以开始使用它创建高级布局。