语言 编辑 高级 使用CSS网格进行基于行的放置 | CSS Grid Layout: Line-based Placement with CSS Grid

在本文介绍了网格布局的基本概念。，我们开始研究如何使用行号在网格中定位项。在本文中，我们将充分探讨规范的这一基本特性是如何工作的。

使用编号行开始对网格的探索是最有逻辑的起点，因为当您使用网格布局时，总是有编号的行。行是为列和行编号的，并从1索引。请注意，网格是根据文档的写入模式编制索引的。在从左到右的语言(如英语)中，第1行位于网格的左侧。如果您使用的是从右到左的语言，那么第1行将是网格的最右边。我们将在稍后的指南中了解更多关于编写模式和网格之间的交互。

一个基本的例子

作为一个非常简单的例子，我们可以使用一个网格，其中有3列轨道和3行轨道。这给了我们4条线在每个维度。

在网格容器中，我有四个子元素。如果我们不以任何方式将这些放置到网格上，它们将按照自动放置规则进行布局，在五个单元中每个单元中有一个项目。如果您使用Firefox网格荧光笔您可以看到网格是如何定义列和行的。

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 100px);
}

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

按行号定位项目

我们可以使用基于行的布局来控制这些项目在网格上的位置。我希望第一项从网格的最左边开始，并跨越一个单一的列轨道。它还应该从第一行开始，在网格的顶部，跨度到第四行。

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

当您定位某些项目时，网格上的其他项目将继续使用自动放置规则进行布局。我们将在稍后的指南中适当地查看这些项目是如何工作的，但是您可以在工作时看到，网格正在将未放置的项目布局到网格的空单元格中。

对每个项目进行单独的寻址，我们可以将所有四个项目放在行和列的轨道上。注意，如果我们愿意的话，我们可以让单元格保持空。网格布局的优点之一是，我们的设计中可以有空白，而不必使用边距来防止浮标上升到我们留下的空间中。

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

.box2 {
   grid-column-start: 3;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box3 {
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 2;
}
.box4 {
   grid-column-start: 2;
   grid-column-end: 4;
   grid-row-start: 3;
   grid-row-end: 4;
}

grid-column和grid-row速记属性

我们在这里有很多代码来定位每个项目。知道有速记应该不足为奇。grid-column-start和grid-column-end特性可组合成grid-column，grid-row-start和grid-row-end则是grid-row。

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

.box1 {
   grid-column: 1 / 2;
   grid-row: 1 / 4;
}
.box2 {
   grid-column: 3 / 4;
   grid-row: 1 / 3;
}
.box3 {
   grid-column: 2 / 3;
   grid-row: 1 /  2;
}
.box4 {
   grid-column: 2 / 4;
   grid-row: 3 / 4;
}

默认跨度

在上面的示例中，我指定了每一行和每列行，以演示这些属性，但是在实践中，如果某项只跨越一条轨道，则可以省略grid-column-end或grid-row-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>

.box1 {
   grid-column-start: 1;
   grid-row-start: 1;
   grid-row-end: 4;
}
.box2 {
   grid-column-start: 3;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box3 {
   grid-column-start: 2;
   grid-row-start: 1;
}
.box4 {
   grid-column-start: 2;
   grid-column-end: 4;
   grid-row-start: 3;
}

我们的速记看起来像下面的代码，没有正斜杠和第二个值的项目跨越一个轨道。

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

.box1 {
   grid-column: 1 ;
   grid-row: 1 / 4;
}
.box2 {
   grid-column: 3 ;
   grid-row: 1 / 3;
}
.box3 {
   grid-column: 2 ;
   grid-row: 1 ;
}
.box4 {
   grid-column: 2 / 4;
   grid-row: 3 ;
}

grid-area属性

我们可以进一步采取措施，并用单一属性来定义每个区域grid-area。网格区域值的顺序如下。

• grid-row-start

• grid-column-start

• grid-row-end

• grid-column-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>

.box1 {
   grid-area: 1 / 1 / 4 / 2;
}
.box2 {
   grid-area: 1 / 3 / 3 / 4;
}
.box3 {
   grid-area: 1 / 2 / 2 / 3;
}
.box4 {
   grid-area: 3 / 2 / 4 / 4;
}

这个值的顺序grid-area可能看起来有点奇怪，这与我们把边距和填充作为速记的方向正好相反。这可能有助于认识到这是由于网格使用CSS编写模式规范中定义的流相对方向。在后面的文章中，我们将探讨网格是如何与写入模式一起工作的，但是，我们有四个相对于流的方向的概念：

• block-start

• block-end

• inline-start

• inline-end

我们正在用英语工作，这是一种从左到右的语言。我们的块启动是网格容器的顶行，块结束容器的最后一行。我们的内联开始是左侧列线，因为内嵌开始始终是文本将以当前写入模式写入的点，内联结束是我们网格的最后列线。

当我们使用指定我们的网格区域grid-area特性，我们首先定义这两个启动线block-start和inline-start，然后两端线block-end和inline-end。由于我们习惯了顶部，右侧，底部和左侧的物理属性，因此这似乎并不常见，但如果您开始将网站视为书写模式下的多向性，则更为合理。

倒计时

我们还可以从网格的块和行内端向后计数，对于英文来说，这将是右边的列行和最后的行行。这些行可以作为-1，你可以从那里数回来-所以倒数第二行是-2值得注意的是，最后一行是显式网格定义的网格。grid-template-columns和grid-template-rows中添加的任何行或列。隐式网格除了这个。

在下一个例子中，我在放置项目时从网格的右侧和底部翻转了我们正在处理的布局。

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

.box1 {
   grid-column-start: -1;
   grid-column-end: -2;
   grid-row-start: -1;
   grid-row-end: -4;
}
.box2 {
   grid-column-start: -3;
   grid-column-end: -4;
   grid-row-start: -1;
   grid-row-end: -3;
}
.box3 {
   grid-column-start: -2;
   grid-column-end: -3;
   grid-row-start: -1;
   grid-row-end: -2;
}
.box4 {
   grid-column-start: -2;
   grid-column-end: -4;
   grid-row-start: -3;
   grid-row-end: -4;
}

在网格中拉伸一个项目

能够处理网格的起始端行很有用，因为您可以通过以下方式在网格上拉伸一个项目：

.item {
  grid-column: 1 / -1;
}

Gutters or Alleys

CSS网格规范包括使用grid-column-gap和grid-row-gap属性在列和行之间添加gutters的功能。这些指定的差距非常类似于column-gap多列布局中的属性。

空隙只出现在网格的轨道之间，它们不向容器的顶部和底部、左边或右侧添加空间。通过在网格容器上使用这些属性，我们可以在前面的示例中添加空白。

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

.box1 {
   grid-column: 1 ;
   grid-row: 1 / 4;
}
.box2 {
   grid-column: 3 ;
   grid-row: 1 / 3;
}
.box3 {
   grid-column: 2 ;
   grid-row: 1 ;
}
.box4 {
   grid-column: 2 / 4;
   grid-row: 3 ;
}
.wrapper {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px);
     grid-column-gap: 20px;
     grid-row-gap: 1em;
}

网格间隙缩短

这两个属性也可以用速记表示，grid-gap如果你只给了一个grid-gap它将同时适用于列和行间隙。如果指定两个值，则第一个值用于grid-row-gap第二个grid-column-gap...

.wrapper {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px);
     grid-gap: 1em 20px;
}

使用span关键词

除了按数字指定起始线和结束线外，还可以指定起始线，然后指定希望区域跨度的轨道数。

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

.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.box2 {
   grid-column: 3;
   grid-row: 1 / span 2;
}
.box3 {
   grid-column: 2;
   grid-row: 1;
}
.box4 {
   grid-column: 2 / span 2;
   grid-row: 3;
}

您还可以使用span值中的关键字。grid-row-start/grid-row-end和grid-column-start/grid-column-end以下两个示例将创建相同的网格区域。在第一步中，我们设置了开始行线，然后是我们解释要跨越3行的结束线。该区域将从第1行开始，跨越3条线至第4行。

.box1 {
    grid-column-start: 1;
    grid-row-start: 1
    grid-row-end: span 3;
}

在第二个例子中，我们指定了我们希望项目完成的结束行，然后将开始行设置为span 3这意味着项目将需要从指定的行行向上跨。该区域将从第4行开始，跨越3条线至第1行。

.box1 {
    grid-column-start: 1;
    grid-row-start: span 3
    grid-row-end: 4;
}

要熟悉网格中基于行的位置，请尝试通过将项目放置到具有不同列数的网格上来构建一些常见的布局。请记住，如果您没有放置所有的项目，任何剩余的项目将被放置根据自动放置规则。这可能会导致您想要的布局，但是如果有什么东西出现在意想不到的地方，请检查您是否已经为它设置了一个位置。

此外，请记住，当您显式地将网格上的项放置在一起时，它们可能会相互重叠。这可能会产生一些好的效果，但是如果您指定了错误的开始或结束行，那么也可能会出现重叠的情况。