现代 CSS

CSS Grid布局：列和间距

作者：大漠 日期：2016-09-29 点击：8962
Grid
Layout
Grid

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

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

可伸缩性单位

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

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

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

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

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

注意间距

在Grid布局中确实有一个新的属性值，能更有效的方式来控制间距，可以说是特定的属性。我们可以使用grid-column-gap和grid-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-column和grid-row的值

其中有什么不妥呢，实际上不需要通过grid-column和grid-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。nike air max 2019 discount

返回顶部