css 网格布局_CSS网格布局：使用网格区域

css 网格布局

我们已经提到了但尚未在本系列中适当介绍的一件事是网格区域 。 到目前为止，我们的网格项目都包含在一个网格单元中，但是我们可以突破这些边界来获得更有用的布局。 让我们来看看！

定义网格区域

这是我们一直在处理的网格：九个网格项自动放置在三等分列，三等分行中，并由20px的装订线分割。

当前，我们的项目仅具有颜色样式，但是让我们回到在第一篇教程中学到的内容，并添加一些grid-column和grid-row规则，这次添加了一些额外的内容：

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

在此简短的grid-column语句中，我们有效地使用grid-column-start和grid-column-end ，告诉项目从网格线1开始并在网格线3结束。

这就是给我们的东西； 现在，第一项分布在两个单元格中，根据Grid的自动放置算法将其他项左右推。

行也可以这样做，这将使我们在网格的左上角有更大的面积。

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

跨越细胞

使用可能更简单的语法，我们可以将span关键字切换为grid-column-end 。 使用span我们不必指定区域的结束位置，而可以定义该项目应分布在多少条轨道上：

.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

这给了我们相同的最终结果，但是如果我们要更改项目开始的位置，我们将不再有义务更改最终结果。

在下面的演示中，您可以看到我们通过删除四个项目来清空布局。 我们已经声明要在两个项目上定位：第一个项目跨越两列和两行，而第四个项目开始于第3列，第2行，并向下跨越两个轨道：

其余项目将自动填充可用空间。 这完美地突出显示了网格布局如何不必反映元素的源顺序。

注意 ：在许多情况下，源顺序绝对应反映演示文稿–不要忘记可访问性。

命名区域

到目前为止，使用我们已经描述的编号方法都可以，但是“ 网格模板区域”可以使布局定义更加直观。

具体来说，它们允许我们在网格上命名区域。 通过命名这些区域，我们可以引用它们（而不是行号）来放置我们的商品。 现在，让我们继续当前的演示，并使用它使自己成为一个粗糙的页面布局，其中包括：

• 标头
• 主要内容
• 侧边栏
• 页脚

我们在网格容器上定义了这些区域，几乎就像在绘制它们一样：

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

放置物品

现在我们将注意力转向项目，放弃grid-column和grid-row规则，转而使用grid-area ：

.item-1 {
  background: #b03532;
  grid-area: header;
}
.item-2 {
  background: #33a8a5;
  grid-area: main;
}
.item-3 {
  background: #30997a;
  grid-area: sidebar;
}
.item-4 {
  background: #6a478f;
  grid-area: footer;
}

我们的第一项插入到标题中，横跨所有三个标题列。 我们为第二个项目分配了主要的内容区域，第三个项目被分配为侧边栏，第四个项目为页脚。 而且这些也不需要遵循源顺序.item-4可以很容易地放在标题区域中。

如您所见，这使布局页面更加容易。 实际上，当我们希望以可视方式表示网格时，为什么不走得更远并使用表情符号呢？

嵌套网格区域

给定的网页将包含所有嵌套的组件，因此让我们看看它如何与Grid一起使用。

当我们声明一个网格容器display: grid; 只有它的直接后代成为网格项 。 除非我们另外特别声明，否则我们添加到这些子元素的内容将完全不受Grid的影响。

在我们的示例中，我们将.item-5 ， .item-6和.item-7回标记中，将它们嵌套在.item-2 。

<section class="grid-1">
  <div class="item-1">1</div>
  
  <div class="item-2">
    <div class="item-5">5</div>
    <div class="item-6">6</div>
    <div class="item-7">7</div>
  </div>
  
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</section>

因此，现在我们需要将.item-2声明.item-2一个网格容器，将其网格设置为两列两行。

display: grid;
  
  grid-template-columns: 1fr 30%;
  grid-template-rows: auto auto;
  grid-gap: 20px;
  
  grid-template-areas: "header header"
                       "article sidebar";

我们可以在这里再次使用名称“ header”，“ article”和“ sidebar”； 不会有任何混乱，因为一切都取决于上下文。 这些网格区域仅适用于.item-2内的网格。

结论

总结一下我们一直在谈论的内容：

翻译自: https://webdesign.tutsplus.com/tutorials/css-grid-layout-using-grid-areas--cms-27264

css 网格布局