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

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

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

声明网格和网格容器

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

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

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

网格容器大小

在CSS Grid布局当中,通过grid-template-rowsgrid-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-rowsgrid-template-columnsgrid-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-columnsgrid-template-rowsgrid-template-areas三个属性可以定义一个显式的网格,确定网格的轨道以及网格行数和列数的明确数量。除此之外,还可以使用grid-auto-rowsgrid-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,对应上图的黑色网格线12。另外通过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的值为gridinline-grid或者subgrid值时,这个容器就成了网格容器,同时此容器的所有子元素也就成了网格项目。这仅仅只是网格项目的说法,但在实际使用当中,网格项目还是涉及不少的知识点以及细节。这里就不做详细的阐述,后面将会花一个节的篇幅来介绍网格项目相关的知识点。

总结

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

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

原文链接:https://www.w3cplus.com/css3/css-grid-layout-terminology-part3.html

发表评论

登录后才能评论