CSS Grid布局:列和间距
在上一节介绍了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