CSS Grid布局:列和间距

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

上一节介绍了Grid的基础知识,在前一节的基础上介绍Grid的新特性,怎么样来提高间距的设置以使用fr单位和repeat()实现可伸缩性的布局。

可伸缩性单位

网格的目的是使我们能正确的控制网格布局,让我们的布局变得更容易。如果你还记得,我们在上一节定义的网格都是和像素有关。

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

有没有可能,把这里的单位换成像em或者rem这样的相对单位,或者说像更先进的vhvmin这样的单位。

在接下来的示例中,我们将把像素单位换成百分比。可以在列宽和间距中使用百分,但必须保证他们之间的总各为100%

grid-template-columns: 30% 5% 30% 5% 30%;

注意间距

在Grid布局中确实有一个新的属性值,能更有效的方式来控制间距,可以说是特定的属性。我们可以使用grid-column-gapgrid-row-gap或者简写的grid-gap属性来定义列间距和行间距。

也就是说,我们没有必要通过网格轨道(行或列)来控制行和列之间的间距。这意味着每列的宽度和行宽度为:

grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: auto auto auto;

看上去有点乱,但这是正常的。你会发现其中不同的是,列宽加起来的总宽度不到100%,那是因为它们之间的列间距将会补充上来。

重复

其实在网格布局中,有一个更适合的方法,那就是使用repeat()函数:

grid-template-columns: repeat(3, 33.33%);

这里的意思就是重复了三次33.33%,让我们三列的宽度是33.33%。而我们不需要在grid-template-rows中不需要显式去声明,其将以auto来分配(也就是其默认值)。现在,我们只需要显式声明我们想要的间距值:

grid-template-columns: repeat(3, 33.33%);
grid-gap: 20px;

grid-gap可以是固定单位,也可以是相对单位,这也意味着网格的间距是可以自适应的也可以固定的,而且不需要任何复杂的计算。

重置grid-columngrid-row的值

其中有什么不妥呢,实际上不需要通过grid-columngrid-row来声明网格项目,那是因为我们不需要显示的声明网格轨道。不过幸运的是,使用grid-gap声明网格间距即可。

fr单位

最后有一个可以让网格布局变得更简单,那就是fr单位。一个fr就是一个自动计算,也就想当于Flexbox布局中的flex:1,可以让网格占据容器可用空间。也就是说,在网格布局中,可能通过fr像下面这样声明网格中的列:

grid-template-columns: 1fr 1fr 1fr;

这里一共有三个fr,其中每个fr就相当于容器宽度的三分之一。这有另外一个例子:

grid-template-columns: 2fr 1fr 1fr;

这里表示有四个fr。第一列占据容器一半可用宽度,其容两个fr分别表示占用容器的四分之一宽度。

这些单位非常强大,尤其是和固定单位组合使用的时候:

grid-template-columns: 300px 1fr 3fr 20%;

上面的代码声明了四个列:

  • 第一列的宽度是300px
  • 最后一列的宽度是容器宽度的20%
  • 然后是通过fr来计算,也就是说第二列是容器剩余宽度的四分之一
  • 第三列是容器剩余宽度的四分之三

看起来就像这样,下面的效果是一个完美的网格布局:

使用的代码:

.grid-1 {
  display: grid;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  grid-template-columns: 300px 1fr 3fr 20%;
  grid-gap: 20px;
}

是不是比上一节变得更为简单。

回过头来,我们使用1fr来替代不准确的33.33%:

grid-template-columns: repeat(3, 1fr);

最后看到的效果如下:

总结

接下来回顾一下上面介绍的内容:

  • 网格接受自适应和固定两种单位组合使用
  • 不需要在grid-template中声明网格间距,可以直接使用grid-gap来直接声明网格之间间距
  • 在网格布局中不显式声明grid-gap,可以使用自适应布局来自动计算他们之间间距
  • repeat()函数可以帮我们节省很多时间,而且更好的维护我们的网格布局
  • fr是一个非常强大的单位,可以按百分比来布局网格

经过这两篇教程,你可以很好的掌握网格布局,而且可以使用网格制作一个简单的由局。在接下来的教程中,我们将一起学习网格区域方面的知识。帮助我们通过一些关键词实现一些跨区域的布局。

本文根据@Ian Yates的《CSS Grid Layout: Fluid Columns and Better Gutters》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://webdesign.tutsplus.com/tutorials/css-grid-layout-units-of-measurement-and-basic-keywords--cms-27259

大漠

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

如需转载,烦请注明出处:http://www.w3cplus.com/css3/css-grid-layout-units-of-measurement-and-basic-keywords.html

返回顶部