最近没事瞄了一眼CSSGrid的CaniUse：
不得不说，兼容性已经达到了一个可以开始大规模使用的地步了。除去一些最近新出的关于CSSGrid的新特性，譬如间距gap、支持瀑布流布局的grid-template-column:masonry，已经可以放心的在业务中开始使用Grid布局了。
如何从入门到熟练使用Grid？--Grid-Attack但是，CSSGrid的一大坨语法总是容易让人望而生畏，心生退意。
最近我就在寻找有没有可以比较好锻炼CSSGrid布局的方式，好好复习一下Grid语法。
无意间，找到了这个网站，一个通过游戏闯关的模式，实现Grid语法的从入门到熟练掌握：
WebSite-CSS-Grid-Attack[1]：通过游戏闯关的方式学习grid布局
GridAttack的一些简介简单介绍一下GridAttack。它的一些核心特点。
即便是在Grid布局方面零基础的同学，也可以尝试下，游戏一共有80关。在每一关的开始前，都会介绍1到2个grid相关的属性，并且给出相应的Demo和解释，通过Demo，我们基本就能理解该属性如何具体使用。
然后，利用给出的提示和部分代码，通过完成指定的Grid布局，解锁该关卡，进入下一关。
尝试一下OK，我们实际尝试一下。这里是#50，第50题。
题目如下：
题目已经给出的代码：
divid="field"divclass="greenLand"/divdivid="redLand"/divdivclass="greenLand"/divdivclass="redLand"/divdivclass="greenLand"/divdivclass="redLand"/div/div
#field{display:grid;gap:20px;grid-template:1fr1fr/1fr1fr;/*typehere*/}
我们需要做的，就是在题目要求的typehere的地方，补全，我们的代码。使得，让绿色虚线和红色虚线边框内放置正确的griditem。
我们可以看到题目中的Griditem有6个，但是实际只定义了一个2x2的grid布局grid-template:1fr1fr/1fr1fr，因此，这里考察的其实是Grid布局中的显示网格和隐式网格。
根据提示，控制多出来的网格的排布，就需要grid-auto-columns和grid-auto-rows。
我们需要通过定义代码，让 的两个griditem，占据px的高度即可。
题解如下：
#field{display:grid;gap:20px;grid-template:1fr1fr/1fr1fr;/*typehere*/grid-auto-rows:px;}
右侧的布局也会实时变化，更新如下：
可以看到，绿色虚线和红色虚线边框内正确地放置了6griditem。本关就通过了。
这里，其实我省略了一些过程，譬如去学习了解，搞懂grid-auto-columns和grid-auto-rows的过程。
这个项目有意思的地方在于，有3种游戏模式，涵盖了简单、中等和困难不同级别的CSS网格知识。
其次是它互动有趣的环境，让学习感觉就像在玩耍，很有意思。
下面是官方给的一些介绍图：
感觉写的有点像软文了，但是确实我自己完整做完80关，感觉收获还是很大的。
初学者可以把它当成边学习语法边巩固的一个习题网站，而已经有一定基础的可以当成一个查缺补漏的复习工具。
网址：
联系电话：