寓教于乐，Grid 布局小游戏 Grid Attack

[chokcoco]

最近没事瞄了一眼 CSS Grid 的 CaniUse：

不得不说，兼容性已经达到了一个可以开始大规模使用的地步了。除去一些最近新出的关于 CSS Grid 的新特性，譬如间距 gap、支持瀑布流布局的 grid-template-column: masonry，已经可以放心的在业务中开始使用 Grid 布局了。

如何从入门到熟练使用 Grid？-- Grid-Attack

但是，CSS Grid 的一大坨语法总是容易让人望而生畏，心生退意。

最近我就在寻找有没有可以比较好锻炼 CSS Grid 布局的方式，好好复习一下 Grid 语法。

无意间，找到了这个网站，一个通过游戏闯关的模式，实现 Grid 语法的从入门到熟练掌握：

WebSite - CSS-Grid-Attack：通过游戏闯关的方式学习 grid 布局

Grid Attack 的一些简介

简单介绍一下 Grid Attack。它的一些核心特点。

即便是在 Grid 布局方面零基础的同学，也可以尝试下，游戏一共有 80 关。在每一关的开始前，都会介绍 1 到 2 个 grid 相关的属性，并且给出相应的 Demo 和解释，通过 Demo，我们基本就能理解该属性如何具体使用。

然后，利用给出的提示和部分代码，通过完成指定的 Grid 布局，解锁该关卡，进入下一关。

尝试一下

OK，我们实际尝试一下。这里是 #50，第 50 题。

题目如下：

题目已经给出的代码：

<div id="field">
  <div class="greenLand"></div>
  <div id="redLand"></div>
  <div class="greenLand"></div>
  <div class="redLand"></div>
  <div class="greenLand"></div>
  <div class="redLand"></div>
</div>

#field {
  display: grid;
  gap: 20px;
  grid-template: 1fr 1fr / 1fr 1fr;
  /* type here */

}

我们需要做的，就是在题目要求的 type here 的地方，补全，我们的代码。使得，让绿色虚线和红色虚线边框内放置正确的 grid item。

我们可以看到题目中的 Grid item 有 6 个，但是实际只定义了一个 2x2 的 grid 布局 grid-template: 1fr 1fr / 1fr 1fr，因此，这里考察的其实是 Grid 布局中的 显示网格和隐式网格。

根据提示，控制多出来的网格的排布，就需要 grid-auto-columns 和 grid-auto-rows。

我们需要通过定义代码，让最后的两个 grid item，占据 100px 的高度即可。

题解如下：

#field {
  display: grid;
  gap: 20px;
  grid-template: 1fr 1fr / 1fr 1fr;
  /* type here */
  grid-auto-rows: 100px;
}

右侧的布局也会实时变化，更新如下：

可以看到，绿色虚线和红色虚线边框内正确地放置了 6 grid item。本关就通过了。

这里，其实我省略了一些过程，譬如去学习了解，搞懂 grid-auto-columns 和 grid-auto-rows 的过程。

这个项目有意思的地方在于，有 3 种游戏模式，涵盖了简单、中等和困难不同级别的 CSS 网格知识。

其次是它互动有趣的环境 ，让学习感觉就像在玩耍，很有意思。

下面是官方给的一些介绍图：

感觉写的有点像软文了，但是确实我自己完整做完 80 关，感觉收获还是很大的。

初学者可以把它当成边学习语法边巩固的一个习题网站，而已经有一定基础的可以当成一个查缺补漏的复习工具。

网址：https://codingfantasy.com/games/css-grid-attack

再罗列一些 Grid 布局中的重点、难点概念：

minmax() function

两个注意：

• 如果 minmax(min, max) 中的最小值大于最大值，那么最大值将被忽略，minmax(min, max) 会被视作最小值
• 使用 1fr 作为最小值是无效的，它只适用于最大值。

auto-fill vs auto-fit

auto-fill 和 auto-fit 的区别，主要是影响到元素个数比较少的情况。

只有行的宽度大到能够容纳额外的列时，auto-fill 和 auto-fit 这两者的区别才会体现出来。

{
    grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
}

auto-fill 的效果如下：

auto-fit 的效果如下：

grid-auto-flow

grid-auto-flow：属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

grid-auto-columns 和 grid-auto-rows

这两个属性牵涉到了显示网格和隐式网格。

我们使用的 grid-template-columns 和 grid-template-rows 是用于控制显式网格的。

使用 grid-template-columns 和 grid-template-rows 用于我们明确地知道我们的 grid 布局中存在多少个 grid item 网格子项。

但是，如果网格中的网格项多于我们利用 grid-template-columns 和 grid-template-rows 定义的网格数量，或者当网格项放置在显式网格之外时，grid 容器会通过向网格中添加网格线来自动生成新的网格轨迹。

显式网格与这些附加的隐式轨迹和线一起形成了所谓的隐式网格。

而对于控制多出来的网格的排布，就需要 grid-auto-columns 和 grid-auto-rows。

最后

好了，本文到此结束，希望对你有帮助 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 -- iCSS前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

[chilingling]

试玩了下，确实不错