Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

CSS Grid 布局:Fluid Columns and Better Gutters

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: A Quick Start Guide
CSS Grid Layout: Using Grid Areas

Chinese (Simplified) (中文(简体)) translation by xiaoT (you can also view the original English article)

在这篇教程中我们将继续探讨上篇文章提到的 Grid,并用一个示例进一步了解 Grid。 我们会改善定义间隙的方式,探讨弹性布局,fr 单位 和介绍 repeat() 方法。

弹性单位

Grid 的重点是让我们正确的控制 web 布局,在进一步了解弹性布局之前,先让我们看看我们的固定布局。 回想一下,我们曾经用固定像素定义的 Grid 布局:

这里用其它单位也是可以的,比如:em、rem。 还有更多不常用的单位,比如:vh 和 vmin

这个示例中我们会用百分比替换固定像素单位。 在我们定义列宽的时候,也需要手动处理留白,保证总和等于100%:

注意留白

有一个新的,更有效的方式处理留白,这也是一个专有的属性。 我们可以使用grid-column-gapgrid-row-gap属性,也可以用缩写grid-gap代替。

这么处理代表着我们不需要在计算网格轨道和留白之间的关系,我们只需要定义好几行几列,因此,当下我们可以这么处理:

嗯,有点乱,但是这可以正常工作。 你们应该会注意每一行的所有列加起来总宽等于100%;留白将会被排除在外。

Repeat 方法

用 repeat() 方法,我们可以写出更整洁的代码:

这句话代表:“重复三次 33.33%” 赋值给 grid-template-columns。 我们甚至不需要声明 grid-template-rows,因为它的默认值就是 auto。 现在,我们只需定义好留白:

grid-gap 可以接受固定和非固定单位,也就是说:不需经过复杂的计算我们可以很好的融合不固定列宽和固定留白。

重置 grid-columngrid-row 的值

有点问题:我们还是需要定义一系列的 grid-columngrid-row ,但是,因为没有足够的网格轨道,就会出错。  高兴的是,我们用 grid-gap 定义留白,这样可以让网格元素自己计算自己的位置,而不会网格空间不够的情况。 现在,移除所有有关位置的定义:

fr 单位

为了让我们的 grid 布局更加简洁我们需要进一步的改进;我们会介绍 fr 或者分数单位。 1 fr 代表“整个空间被平均分配后的其中之一”。 比如:我们可以这么声明 columns:

这里一共有 3 个 fr 单位,因此,每一列都是 1/3 。 这里是另外一个示例:

现在,一共 4 个 fr 单位,第一列是 1/2 宽,其余两列分别是 1/4 宽。

这个单位非常有用,特别是和其它计量单位结合使用的时候:

以上,我们声明了 4 列:

  • 第一列固定宽 300px
  • 最后一列是父级网格容器的 20%
  • 然后,每一个 fr 单位都会根据去除间隙后剩余空间计算,第二列只是其中一份
  • 第三列就是剩余空间的 3/4

看起来就像这样,9 个元素完美的自动排列,它们之间也会有留白:

回到原来的示例中。 让我们用 1fr 代替笨拙又不正确的 33.33%:

最总结果:

总结

概括一下:

  1. Grid 中可以混合使用弹性和固定计量单位。
  2. 我们不需要给grid-template定义间隙,可以用grid-gap属性代替。
  3. grid-gap 代表着我们不需要给每个网格元素计算位置,这些完全可以自动完成。
  4. repeat() 方法可以节省我们的时间,也会让样式表更易维护。
  5. fr 或者 fraction 单位在定义声明 grid templates 时非常有用。

这两篇教程中我们走了很长一段路,你也学会了简洁有用的 grid 布局,应该为自己而自豪! 接下来的教程中,我们会探讨 grid areas,看看关键字 span 和其它有用的布局。

更多有用的资源

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.