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

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

上一节中,主要介绍了CSS Grid布局中网格线、网格布局属性、单元格合并等相关术语,在这篇文章中将继续介绍网络布局中的相关术语:网格区域,网格轨道和网格单元格。希望对大家对学习CSS Grid布局有所帮助。

网格区域(Grid areas)

记得前面的文章中介绍网络线的一节中,了解到可以通过grid-rowgrid-column构建出grid-area(也就是我们要说的网格区域)。通过网格线构建的网格区域,其有一个明确的顺序:grid-row-start / grid-column-start / grid-row-end / grid-column-end。如下面示例所示:

.item-1 {
  grid-area: 1 / 1 / 2 / 4;
}
.item-2 {
  grid-area: 2 / 1 / 4 / 2;
}
.item-4 {
  grid-area: 2 /  3 / 4  / 4;
}
.item-6 {
  grid-area: 4 / 1 / 5 / 4;
}

效果如下:

上面这种方式,能通过网格线构造出想要的网格区域。但更妙的是,在CSS Grid布局中可以直接定义网格区域,用来放置对应的网格项目。CSS Grid布局有可以使用grid-template-areas属性来声明。然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。

假设我们有一个5 x 4的网格:

<section class="grid">
  <div class="title">title</div>
  <div class="nav">nav</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</section>

先在把.grid声明为网格容器:

.grid {
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-areas:
        'title title title title aside'
        'nav main main main aside'
        'nav main main main aside'
        'footer footer footer footer footer';
}

通过grid-template-rows设置了每行的行高,grid-template-columns设置了每列的列宽,而使用grid-template-areas是用来声明了网格区域。

把对应的网格项目放到已声明好的网格区域上:

.title {
  grid-area: title;
}
.nav {
  grid-area: nav;
}
.main {
  grid-area: main;
}
.aside {
  grid-area: aside;
}
.footer {
  grid-area: footer;
}

对应的意思草图如下所示:

网格区域

最终上面代码绘制出来的网格效果如下:

网格区域和网格线命名

有关于网格区域和位置属性是一个非常有趣的事情,可以使用网格线的隐名来创建一个网格区域。这些隐名使用-start-end后缀添加到网格区域名后面。比如上面示例中的title区域创建了4条网格线的隐名:

  • 区域左边的网格线title-start
  • 区域右边的网格线title-end
  • 区域顶边的网格线title-start
  • 区域底边的网格线title-end

像下面的例子,可以使用隐式名来放置一个网格项目:

grid-column: main-start / aside-end;
grid-row: title-start / nav-end;

网格区域和网格线命名

在网格布局中,如果你使用了带有后缀的名词命名了网格线,其实就创建了一个隐式的网格区域,所以像下面这样的方式,也可以创建和前面示例相同的网格:

.grid {
    display: grid;
    grid-template-columns: [title-start nav-start footer-start] 100px [main-start nav-end] 100px 100px 100px [aside-start title-end main-end] 100px [aside-end footer-end];
    grid-template-rows: [title-start aside-start] 100px [nav-start main-start title-end] 100px 100px [footer-start nav-end main-end aside-end] 100px [footer-end];
}

这样创建好网格线之后,可以直接通过grid-area调用隐式的网格区域名来创建网格:

除此之外,还可以通过grid-rowgrid-column调用网格线名称,创建网格:

.title {
  grid-row: title-start / title-end;
  grid-column: title-start / title-end;
}
.nav {
  grid-row: nav-start / nav-end;
  grid-column: nav-start / nav-end;
}
.main {
  grid-row: main-start / main-end;
  grid-column: main-start / main-end;
}
.aside {
  grid-row: aside-start / aside-end;
  grid-column: aside-start / aside-end;
}
.footer {
  grid-row: footer-start / footer-end;
  grid-column: footer-start / footer-end;
}

效果如下:

或许你可能会觉得,在grid-template-rowsgrid-template-columns中使用一大串的[title-start aside-start]等方式声明隐式网格线,创建隐式的网格区域麻烦。但事实上,我们不需要这样做,通过grid-template-areas声明的网格区域,就已经创建了隐式网格线,如此一来,不使用grid-area而使用grid-rowgrid-column就可以放置对应的网格项目。

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-areas:
            'title title title title aside'
            'nav main main main aside'
            'nav main main main aside'
            'footer footer footer footer footer';
}
.title {
    grid-row: title-start / title-end;
    grid-column: title-start / title-end;
}
.nav {
    grid-row: nav-start / nav-end;
    grid-column: nav-start / nav-end;
}
.main {
    grid-row: main-start / main-end;
    grid-column: main-start / main-end;
}
.aside {
    grid-row: aside-start / aside-end;
    grid-column: aside-start / aside-end;
}
.footer {
    grid-row: footer-start / footer-end;
    grid-column: footer-start / footer-end;
}

网格轨道(Grid Tracks)

网格轨道用更好的词来描述其实就是网格的。就是网格中相邻两条网格线组成的区域。如下图所示:

网格轨道

如上图所示,竖线网格线12(蓝绿色)组成了第一列;竖线网格线56(黄色)组成了第五列;横线网格线12(酒红色)组成了第一行。那么这几个区域都是我们所说的网格轨道。

网格中的每个轨道(行或列)都有一个尺寸函数,用来控制行的高度或列的宽度。而且还具备自动计算的功能,当内容超过网格行、列指定的尺寸时,会自动增加行的高度或列的宽度。另外相邻网格轨道可以通过网格间距隔开。

单元格(Grid Cell)

网格单元格(Grid Cell)是指网格行和列交叉点。它是一个可以定位网格项目时要参考的网格的最小单位。

单元格

在网格布局中,多个单元格可以构成一个网格区域。其实他就像表格(table)中的td

总结

继上一篇文章之后,在这篇文章中介绍了网格区域、网格轨道和网格单元格的术语。除了这两篇文章介绍到的中网格线、网格布局属性、单元格合并、网格区域、网格轨道和网格单元格之外还有其他术语,在下一篇文章中将详细介绍网格布局中的网格术语。也是较为复杂的一部分。感兴趣的同学欢迎持续关注后续的更新。

大漠

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

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

返回顶部