CSS Grid布局：图解网格布局中术语三

作者：大漠 日期：2016-10-07 点击：2244
CSS3 Grid Layout
Grid
Layout
CSS3

经过网格术语一和术语二两篇文章，我们对CSS Grid布局中术语有一定的了解。除了这两篇文章提到的术语之外，还有其他相关的术语。这篇文章主要和大家一起来探讨网格。

CSS Grid布局说的就是网格，那么网格就是其中最重要的术语之一。接下来，我们要说的就是网格相关的内容。

声明网格和网格容器

如果需要使用CSS Grid给Web页面进行布局，首先需要声明网格。在CSS中，声明网格主要方式就是通过给某个容器的display设置为grid、inline-grid或者subgrid值之一。同时这个容器就被称为网格容器，而这个容器的子元素就称为网格项目。

网格容器不是块容器(display:block)，因此在块容器中的一些属性使用并不适用于网格容器当中:

  • 多列布局属性column-*不能用于网格容器
  • 浮动和清除浮动，对于网格项目中使用不生效。但是，浮动的属性对于网格容器的子元素还是生效的
  • vertical-align属性对于网格项目不生效
  • ::first-line和::first-letter伪元素不能用于网格容器

网格容器大小

在CSS Grid布局当中，通过grid-template-rows和grid-template-columns隐式的确定了一个网格的列数、行数以及网格的大小：

.grid {
  display: grid;
  grid-template-columns: 150px 20px  300px 20px 150px;
  grid-template-rows: 100px 20px 100px 20px 50px;
}

上面代码创建了一个5 x 5的网格：

显式网格

正如前面所示，通过grid-template-rows、grid-template-columns和grid-template-areas三个属性可以显式的创建一个网格容器。而且这三个属性可以简写成grid-template。比如:

grid-template: auto 1fr / auto 1fr auto;

上面代码相当于：

grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr auto;
grid-template-areas: none;

除此之外，还可以将网格轨道、网格线以及网格区域通过grid-template来描述：

grid-template: [header-top] "a   a   a"     [header-bottom]
             [main-top] "b   b   b" 1fr [main-bottom]
                      / auto 1fr auto;

相当于：

grid-template-areas: "a a a"
                     "b b b";
grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
grid-template-columns: auto 1fr auto;

显式网格

效果如下：

隐式网格

使用定义网格的属性：grid-template-columns、grid-template-rows和grid-template-areas三个属性可以定义一个显式的网格，确定网格的轨道以及网格行数和列数的明确数量。除此之外，还可以使用grid-auto-rows和grid-auto-columns可以创建一个隐式网格。

#grid {
    display: grid;
    grid-template-columns: 20px;
    grid-auto-columns: 40px;
    grid-template-rows: 20px;
    grid-auto-rows: 40px;
}
#A {
    grid-column: 1;
    grid-row: 1;
}
#B {
    grid-column: 2;
    grid-row: 1;
}
#C {
    grid-column: 1;
    grid-row: 2;
}
#D {
    grid-column: 2;
    grid-row: 2;
}

隐式网格

上图告诉我们，使用：

grid-template-columns: 20px;
grid-template-rows: 20px;

创建了一个1 x 1网格，其列宽和行高都是20px，对应上图的黑色网格线1和2。另外通过grid-auto-columns创建一个隐式的列和grid-auto-rows创建一个隐式的行，这样就创建了一个2 x 2的网格。其中另外创建了两条隐式的网格线,就是上图显示的红色网格线3。

除此之外，还可以通过下面的方式创建一个隐式的网格。比如使用下面的代码，创建一个2 x 1网格:

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

假设有一个网格项目放置在第五列(grid-column: 5)。如此一来，在前面2 x 1的网格基础上增加了3个隐式的列，而其中网格项目放置在第五列，第一行中。如下图所示：

隐式网格

正如上图所示，隐式的三列的列宽都是grid-auto-columns的值，在这里也就是100px;

同样，也可以使用span关键词合并单元格，从而创建隐式的列或行。比如，你需要创建一个列，从第2列开始，并且合并3个单格。如此一来，就创建了两个隐式的列：

grid-column: 2 / span 3

隐式网格

本来，隐式的网格轨道只能在末尾添加。但现在有可能它也在显式的网格轨道前添加。比如使用grid-column: -5来放置一个网格项目。这样就会在显式的网格前面添加了两个隐式的列：

隐式网格

在介绍的网格线一节中，介绍过，网格线除了正整数来定义网络线序列号之外，还可以负数来声明网格线序列号，详细的介绍可以阅读《图解网格布局中术语之一》一文。

隐式网格和网格线命名

上面介绍的方法不是唯一创建隐式网格，我们还可以使用未定义的网格线名称来创建隐式网格。比如下面的示例，在网格项目中使用一个未定义的网格线名称foo。

隐式网格和网格线命名

上图创建一个2 x 3显式网格，然后通过下面的方式创建三个隐式的列：

.item-1 {
    grid-column:foo;
}
.item-2 {
    grid-column: 2 / span 2 foo;
}
.item-3 {
    grid-column: -1 foo;
}

或许上面的示例还不太好理解，如果真是如此，下面的这个示例，或许你帮助你更好的理解。我们在前面的示例当中，添加一个middle的网格线：

display: grid;
grid-template-columns: 200px [middle] 200px;
grid-auto-columns: 100px;

现在，让我们使用middle网格线来放置网格项目：

.item-1 {
    grid-column: 3 middle;
}
.item-2 {
    grid-column: span 2 middle / 5;
}
.item-3 {
    grid-column: -4 / span middle;
}

隐式网格和网格线命名

这里比较奇怪的是grid-column: span 2 middle / 5;，正如你所看到的一样，网格线middle是从-1开始计算，到第4条结束。这里看上去有点复杂，但实际使用并不需要这样的麻烦，这里只是为了帮助大家更好的理解隐式网格和隐式网格线。

网格项目

如果显式的给某个容器设置了display的值为grid、inline-grid或者subgrid值时，这个容器就成了网格容器，同时此容器的所有子元素也就成了网格项目。这仅仅只是网格项目的说法，但在实际使用当中，网格项目还是涉及不少的知识点以及细节。这里就不做详细的阐述，后面将会花一个节的篇幅来介绍网格项目相关的知识点。

总结

这篇文章主要介绍了网格布局中的网格术语以及其相关的知识点。

  • 通过dispaly显式的给某个容器设置grid、inline-grid或者subgrid，此时这个容器就成为网格容器，其子元素就成了网格项目
  • 在网格布局中，可以通过grid-template-rows、grid-template-columns和grid-template-areas显式的创建一个网格
  • 也可以通过grid-auto-columns和grid-auto-rows来创建一个隐式的网格
  • 除此之外，还可以通过grid-column、grid-row放置网格项目时，也创建一个隐式的网格

那么在下一节的中，将为大家阐述网格项目相关的知识。如果您对这方面感兴趣，欢迎持续关注相关更新。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/css-grid-layout-terminology-part3.html

返回顶部