css grid网格布局_通过Grid Garden学习CSS网格布局（有趣的方式）

大多数Web开发人员都知道Flexbox Froggy游戏 ，该游戏从头开始教您Flexbox的基础知识 。 这款免费游戏风靡一时 ，它对于教人们如何使用flexbox进行编码仍然具有不可估量的价值 。

好吧，制作该游戏的同一位开发人员拥有一个名为Grid Garden的 全新游戏 。

该游戏的工作方式与此类似，但可以教您如何编写CSS网格 。 这是一个相对较新的功能，但很快就流行起来 ，Grid Garden很容易成为学习的最佳方法。

Grid Garden中的所有内容都遵循与 Flexbox Froggy 类似的教学风格 。 它是由同一位开发人员Thomas Park创建的，因此您可以预期会有类似水平的难度和可用性。

默认情况下，您从第一个级别开始，从开始到结束共有28个级别 。 如果您认为有些难度太大，可以随时跳过这些级别 ，但是我发现最好将它们作为一个复习来贯穿所有级别 。

如果您不知道与网格相关的属性如何工作，您会发现自己在搜索很多单词。 CSS网格布局是一个全新的模块 ，具有自己的语法和功能。

我极力建议您在有机会的时候和Grid Garden一起玩。 实际上，这是CSS开发人员的游乐场，用于学习和研究所有各种网格布局属性。

我不能说这个游戏会让您成为CSS网格专家。 只有构建项目并进行大量实践才能使您达到专家水平。 但是，Grid Garden是一种有趣的入门方式，不需要学习新事物时所面临的所有常见压力。

如果您想在本地下载以进行研究或扩展，则整个项目是完全免费的，并且在GitHub上开源。 您还可以通过Twitter @thomashpark与创建者分享您的想法。

翻译自: https://www.hongkiat.com/blog/learn-css-grid-layout/