网格布局的基础知识 | CSS Grid Layout: Basic Concepts of Grid Layout

CSS网格布局将二维网格系统引入到CSS中.。网格可用于布局主要页面区域或小用户界面元素。本文介绍了CSSGrid布局和CSSGrid布局级别1规范中的新术语。然后，本指南的其余部分将更详细地解释本概览中显示的功能。

什么是网格？

网格是一组横线和垂直线的交集--一组定义列，另一组定义其他行。元素可以放在网格上，尊重这些列和行。CSS网格布局具有以下特性：

固定和灵活的轨道尺寸

您可以创建一个具有固定轨道大小的网格，例如使用像素。您还可以使用灵活的大小和百分比创建网格，也可以使用新的fr为此目的而设计的单位。

项目放置

您可以使用行号、名称或以网格的某个区域为目标，将项目放置到网格上的精确位置。网格还包含一种算法，用于控制未在网格上明确位置的项的位置。

创建保存内容的附加音轨

您可以使用网格布局定义显式网格，但该规范还处理在声明网格之外添加的内容，根据需要添加额外的行和列。它还包括了一些特性，比如添加“尽可能多的列放入容器中”。

对准控制

网格包含对齐功能，以便我们可以控制项目在放置到网格区域后如何对齐，以及整个网格是如何对齐的。

重叠内容的控制

可以将多个项放置到网格单元中，或者区域可以部分重叠。然后，可以用z-index...

网格是一个强大的规范，当它与css的其他部分结合时，例如挠曲箱，可以帮助您创建以前无法在CSS中构建的布局。所有这些都是从在您的网格容器...

网格容器

我们创建一个网格容器宣布display: grid或display: inline-grid在一个元素上。我们一做完这一切直接儿童会变成网格项...

在这个例子中，我有一个包含一个包含一个包装器类的div，里面有五个子元素。

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

我做.wrapper网格容器。

.wrapper {
  display: grid;
}

所有直接子级现在都是网格项。在Web浏览器中，在将项目转换为网格之前，您将不会看到这些项的显示方式有什么不同，因为网格已经为这些项创建了单个列网格。此时，您可能会发现在Firefox Developer Edition中工作是有用的，它具有网格检查员可作为开发人员工具的一部分提供。如果您在Firefox中查看此示例并检查网格，您将看到该值旁边有一个小图标。grid单击此按钮，此元素上的网格将覆盖在浏览器窗口中。

当您学习并使用CSSGrid布局时，这个工具将使您更好地了解网格在视觉上发生的情况。

如果我们想要让这个更多的网格-就像我们需要添加列轨道。

网格轨道

属性定义网格上的行和列。grid-template-columns和grid-template-rows财产。这些定义了网格轨迹。阿栅极轨道网格上任意两行之间的空间。在下面的图像中，您可以看到一个轨道荧光笔-我们的网格中的第一行轨道。

我可以通过添加grid-template-columns属性，然后定义列跟踪的大小。

我现在已经创建了一个网格，有三个200像素宽的列轨道。子项将在此网格上部署，每个网格单元格中的一个。

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

fr股

音轨可以使用任何长度单位来定义。网格还引入了一个额外的长度单位，以帮助我们创建灵活的网格轨道。新fr单元表示网格容器中可用空间的一小部分。下一个网格定义将创建三个相同宽度的轨道，根据可用空间的大小增长和缩小。

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

在下一个示例中，我们使用2fr第二轨道1fr脚印。可用空间分为四个。第一首曲目有两部分，第二部分各有一部分。

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

在最后一个例子中，我们将绝对尺寸的轨道和分数单位混合在一起。第一个音轨是500像素，所以这个固定的宽度被从可用的空间中删除。剩下的空间被分成三个，并按两个灵活轨道的比例分配。

.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

跟踪列表repeat()表示法

有许多轨道的大型网格可以使用repeat()符号，以重复全部或部分的轨道列表。例如，网格定义：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

也可以写成：

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

重复表示法可用于轨道列表的一部分。在下一个示例中，我创建了一个初始20像素跟踪的网格，然后创建了一个6的重复部分。1fr跟踪然后最后20像素的轨道。

.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

重复表示法采用一个曲目列表，因此您可以使用它来创建一个重复的曲目模式。在下一个例子中，我的网格将由10条轨道组成，1fr后面跟着一个2fr追踪，重复了五次。

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

隐式和显式网格

在创建示例网格时，我们使用grid-template-columns属性，但允许网格根据需要为内容创建行。这些行是在隐式网格中创建的。显式网格由您使用的行和列组成。grid-template-columns和grid-template-rows如果您将某些内容放置在该定义网格之外，或者由于需要更多网格跟踪的内容，则网格将在隐式网格中创建行和列。默认情况下，这些曲目将是自动大小的，基于它们内部内容的大小也是如此。

还可以为隐式网格中创建的轨道定义一个设置大小。grid-auto-rows和grid-auto-columns财产。

在下面的示例中，我们使用grid-auto-rows以确保在隐式网格中创建的轨道高为200像素。

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

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

径迹调整和minmax()

在设置显式网格或为自动创建的行或列定义大小大小时，我们可能希望为轨道提供最小的大小，但确保它们展开以适应添加的任何内容。例如，我可能希望我的行不会折叠小于100像素，但是如果我的内容延伸到300像素，我希望行延伸到那个高度。

网格有一个解决方案。minmax()功能。在下面的示例中，我将使用minmax()在…的价值上grid-auto-rows自动创建的行将至少有100像素高，最高为auto.使用auto意味着大小将查看内容大小，因此可以拉伸，以便为这一行中单元格中最高的东西提供空间。

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

<div class="wrapper">
  <div>One</div>
  <div>Two
    <p>I have some more content in.</p>
    <p>This makes me taller than 100 pixels.</p>
  </div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

网格线

应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是线条。网格然后给我们编号行，以使用时，定位项目。在我们的三列，两行网格中，我们有四列行行。

根据文档的书写方式对行进行编号。在从左到右的语言中，第1行位于网格的左侧.。在一种从右到左的语言中，它位于网格的右边.。行也可以命名，我们将在本系列后面的指南中介绍如何做到这一点。

项目对线定位

我们将在后面的文章中详细探讨基于行的布局。下面的示例演示如何以简单的方式完成此操作。当放置一个项目时，我们的目标是路线-而不是轨道。

在下面的示例中，我使用grid-column-start，，，grid-column-end，，，grid-row-start和grid-row-end财产。从左到右工作，第一项放在第1列的旁边，并跨越到第4列，在我们的例子中，第4行是网格上最右边的行。它从第1行开始，最后在第3行结束，因此跨越两行轨道。

第二项从网格列第1行开始，跨越一个轨道。这是默认的，所以我不需要指定结束行。它还跨越从第3行到第5行的两行轨道。其他项目将放置在网格上的空空间中。

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

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

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

.box2 { 
  grid-column-start: 1; 
  grid-row-start: 3; 
  grid-row-end: 5; 
}

不要忘记可以使用网格检查员在Firefox开发工具中，查看项目如何与网格线相对应。

网格单元

阿栅极单元是网格上最小的单位。从概念上讲，它就像一个表格单元格。正如我们在前面的示例中所看到的，一旦在父节点上定义了网格，子项就会在定义的网格的每个单元格中放置一个。在下面的图片中，我突出显示了网格的第一个单元格。

网格区域

项可以按行或按列跨一个或多个单元格，这将创建网格面积网格区域必须是矩形的，例如，不可能创建一个L形区域。突出显示的网格区域跨越两行和两列轨道。

排水沟

排水沟或小巷在网格单元格之间创建网格单元格时，可以使用grid-column-gap和grid-row-gap属性，或速记grid-gap在下面的示例中，我在列和1em行间的空隙。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 1em;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

空隙所使用的任何空间，在空间分配到灵活长度之前，都会被考虑进去。fr轨道，和差距的作用，大小的目的，就像一个常规的网格轨道，但你不能把任何东西到一个缺口。就线路定位而言，差距就像一条粗线.

嵌套网格

网格项可以成为网格容器。在下面的示例中，我在前面创建了三列网格，其中有两个定位项。在这种情况下，第一个项目有一些子项。由于这些项目不是网格的直接子项目，因此它们不参与网格布局，因此在正常的文档流中显示。

<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>

如果我box1到display: grid我可以给它一个轨道的定义，它也将成为一个网格。然后在这个新的网格上放置项目。

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

在这种情况下，嵌套网格与父网格没有关系。如您在示例中所看到的，它没有继承grid-gap父网格和嵌套网格中的行不对齐父网格中的行。

亚网格

在第1级网格规范中，有一个名为亚网格这将允许我们创建使用父网格的跟踪定义的嵌套网格。

子网格尚未在任何浏览器中实现，规范可能会更改。

在当前规范中，我们将编辑上述嵌套网格示例，以使用display: subgrid而不是display: grid，然后删除轨道定义。嵌套网格将使用父网格轨道来布局项目。

应该注意的是，嵌套网格是在两个维度-行和列。不存在隐式网格与子网格协同工作的概念。这意味着您需要确保父网格为所有子项提供足够的行和列跟踪。

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

分层项目z-index

网格项可以占用相同的单元格。如果我们返回到我们的例子中，项目按行号定位，我们可以将其更改为使两个项重叠。

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

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

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

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

项目box2现在是重叠的box1，它将显示在顶部，因为它稍后会以源顺序出现。

控制命令

我们可以通过使用z-index属性--与定位项一样。如果我们给box2较低的z-index比box1它将显示在下面box1堆里。

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

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

.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}

下一步

在本文中，我们通过Grid Layout Specification快速浏览了一下。试一下代码示例，然后转到本指南的下一部分，我们将开始深入了解CSS网格布局的细节。