边学边玩CSS Grid

本文做者：刘观宇，360奇舞团高级前端工程师、技术经理，曾参加360导航、360影视、360金融、360游戏等多个大型前端项目。关注W3C标准、IOT、人工智能与机器学习的最新进展，W3C CSS工做组成员。

十年磨一剑，霜刃不曾试。今日把示君，谁有不平事。 —— 唐·贾岛《剑客》

游戏概况

Grid Garden¹是Codepip²建立的一款寓教于乐的在线网页游戏，游戏共有28关。玩家能够经过过关的方式掌握CSS最新标准CSS Grid。

游戏的设定是一个花园种植胡萝卜的场景，玩家经过在代码区填写CSS Grid的相关代码完成除草、浇水等任务。经过玩家的辛勤劳做，必定可以吃上纯自然、无公害的胡萝卜。

打开游戏，咱们发现，游戏存在多语言版。在左侧底部就能够切换各类语言。事实上，笔者对本身的英语水平是很是有信心的，因此坚决果断的切换到——简体中文版。

除了代码区和任务区，玩家能够在选关区选择28关的任意一关来挑战；当玩家在代码区敲入代码时候，右侧的任务和结果展现区会实时根据代码展示结果。若是代码完成了任务，则点击提交按钮，会进入下一关，若是玩家通关的话，则展现通关特效;若是代码不能完成任务，提交按钮会灰掉。若是玩家硬来，代码区会有一个错误特效供玩家欣赏:-(

除了游戏自己，游戏的目的是加深玩家对CSS Grid的理解。说到CSS Grid，这但是一种强大的Web页面布局方式。恰当的使用CSS Grid，能够高效地解决不少常见的布局问题，并且优雅、简洁。完整的CSS Grid属性参考，可查阅这里³。因为CSS Grid标准尚属CR(CR，Candidate Recommendation)阶段，若是你是最新标准的爱好者，还能够跟进CSS工做组关于CSS Grid的最新进展⁴。

尽管如此，如今主流浏览器都已经有了不一样程度的支持，支持度以下图所示：

说到这里，各位都火烧眉毛地想要在游戏中一试身手了吧，那么话很少说，Let's Go。

过关实录

跟网格项玩耍

也许各位玩家彻底没有接触过CSS Grid，刚刚进来可能会有些不知所措。咱们姑且认为前面几关是教学关。通常游戏的教学关都会有一我的物在屏幕上蹦来蹦去外加叨逼叨来普及各类概念和操做。那么笔者如今就来饰演一下这我的物。

1. CSS Grid元素主要分为两大类：网格容器和网格项。网格容器是父元素，网格项是子元素。
2. 对于网格容器和网格项各有不一样的属性修饰。
3. 声明Grid布局要作的事情是在网格容器的CSS代码中指定display: grid;、display: inline-grid;或者display: subgrid;
4. 网格线构成网格结构的分界线，是定位网格项的参照。下图就是行row和列column的第一个网格线的位置。换句话说，对于一个每行有5列的网格，它的每一行总共有6个网格线。若是这点看不清楚，那可能须要复习植树问题了:-(

5. 网格轨道是指相邻的 网格线之间的部分，下图箭头所指是一个网格轨道。

掌握了这些知识咱们就能够开始过关之旅了。

第1关到第11关设置主要是针对网格项属性grid-column-start和grid-column-end展开的，至关的简单，相信玩家必定能够很快的完成。

下面简单总结一下第1-11关：

1. grid-column-start和grid-column-end做用于网格项。
2. 上述值可配合使用来解决跨行跨列问题。
3. grid-column-start和grid-column-end中，start不必定比end小，逆向是被容许的。
4. 能够设置负值，负值的意思是从最后一个网格线算起的数值。
5. 除了取数值外，还可使用span关键字。格式是span <number>意思是跨越多少个网格轨道
6. 可使用grid-column: <start>/<end>来简写， span关键字适用此缩写。

上面可能出错的地方在于，设置数值时候，是肯定网格线的顺序而非网格轨道的顺序，尤为是负数时候，而span后面跟着的数字是网格轨道的个数。只要牢记这点就很容易。

第12关与第13关，主要展现了CSS Grid在行row上设置的能力，二维空间的设置是Grid布局比flex布局拓展的一个方面。

这两关也比较简单。

从第14关开始，咱们开始综合运用行与列的属性。 第14和15关的过关，须要灵活利用上述关键字。规范中还能够给轨道线命名，这里暂时没有遇到，咱们先不使用“命名”这个利器。

第16关的意思是能够行列的简写方式，依然可使用grid-area属性再次化简，grid-area接收4个由/隔开的值，依次为：grid-row-start, grid-column-start, grid-row-end, grid-column-end。

第17关告诉咱们，重迭覆盖是不影响计算机制的。

依然很简单，过。

针对17关的重叠，第18-19关引入了属性关键字：order，order相似于z-index，代表叠放顺序，数值越大，越在上。容许负数。

很简单是否是。

跟网格容器玩耍

上面咱们对网格项的“一波操做猛如虎”，下面咱们再来看一看，对于网格容器的操做，能不能“横扫千军我作主”。

第20关到第22关主要针对网格容器的属性grid-template-columns和grid-template-rows展开的。

下面简单总结一下第20-22关：

1. grid-template-columns和grid-template-rows用于设置Grid布局的行列中网格轨道的大小
2. repeat函数能够简化多个同值，格式为repeat(N, value)，其中N是个数，value是值。repeat能够与其余值混用，如：grid-template-columns: repeat(N-1, value) value
3. 定义上述属性时，容许长度单位混合使用。

第23-25关，主要说明了关键字fr的使用。

下面总结一下第23-25关：

1. fr是“分数”的英文单词fraction的简写。
2. fr用于等分等分网格容器剩余空间。那么fr是怎么分配空间的呢？举个例子说明：设有A、B、C三个网格轨道，他们的grid-template-columns的设置依次是1fr、2fr和3fr。那么他们共同把一个行分为6等分，则A，B，C的空间就依次得到了这一行的1/六、2/6和3/6。
3. fr是能够和其余单位混用的，如grid-template-columns: 1fr 50px 1fr 1fr;。计算优先级记住一点便可：除了auto以外，先计算全部固定值(包括百分数)后，剩下的空间再计算fr。

第26关介绍grid-template-rows与前面的grid-template-columns语法相似。留给玩家尝试。

第27关介绍了grid-template-columns与grid-template-rows的简写方式grid-template，写法是：grid-template-rows / grid-template-columns

经历了百转千回，咱们终于来到了关底，咱们来看看大BOSS的尊容：

WTF？只能写一行代码么？ 仔细想一想：grid-template最简洁，格式是/隔开的先行后列。 先解决行：须要把50px先分出去，后面100%给到花草。再解决列，列的场景是典型的fr使用场景，杂草占空间的1/5，胡萝卜占4/5。

因而代码是：grid-template: 1fr 50px/1fr 4fr;

Bingo!恭喜你，通关成功！

结语

是的，咱们已经最快速度领略了CSS Grid的风采。然而，对于整个的CSS Grid咱们仅仅作了最经常使用的展现，更多的好玩的作法，还要等待你们的发掘，以及标准的演进。

文内连接

1. cssgridgarden.com/
2. codepip.com/
3. developer.mozilla.org/zh-CN/docs/…
4. drafts.csswg.org/css-grid/

相关文章

• 你不知道的 CSS Grid 布局
• 2017年年中总结——前端大事件回顾
• 不用预编译，CSS 直接写嵌套的日子就要到了

致谢

感谢李松峰老师、高峰、刘博文对本文修订提出的中肯意见。 设计师王旋美眉帮忙设计了精美的题图。 在此诚挚的表示感谢。

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送连接到后台便可给咱们投稿。