在游戏中学习CSS布局的网站 CSS Grid Garden

Sponsor

通过 CSS Grid Garden 在线游戏，您将能够以有趣和互动的方式学习 Grid Layout 的所有秘密。这个聪明的小游戏会引导您逐步了解这种强大而灵活的 CSS 技术的不同功能。

无论您是初学者还是经验丰富的开发人员，CSS Grid Garden 都能让您以有趣的方式发现和练习 Grid Layout！

什么是 CSS 网格布局？

CSS 网格布局是一个 CSS 模块，可让您更轻松、更一致地跨所有浏览器创建复杂且响应式的 Web 布局。

它是一个网格定位系统，允许将网页分为行和列，从而提供对不同内容区域的大小和位置的精确控制。

与以前的布局方法（如浮动或 Flexbox）不同，网格布局提供了一种更强大、更灵活的二维方法来组织页面上的元素。

基本概念

Grid Layout 的主要功能包括定义列和行、在网格的特定区域中定位元素以及管理单元格之间的空间。

网格是由一系列相交的线条组成的结构。CSS 网格布局规范的主要概念是：

• 定义网格的线条：它们可以是水平的或垂直的，
• 它们可以是水平或垂直的，从 1 开始编号。
• 网格轨道，即网格中定义的 （水平） 行或列 （垂直）。
• 网格单元格，它们是行和列的交集。
• 网格区域，定义矩形的一个或多个相邻网格单元。

浏览器支持

由于主要现代浏览器支持 Grid Layout，它已被 Web 开发人员广泛采用。它被认为是 CSS 布局功能的重大进步。

CSS 网格布局（1 级）的浏览器兼容性得分为 97。这是一个集体分数（满分 100 分），代表浏览器对 Web 技术的支持。

此分数越高，与浏览器的兼容性就越强。

什么是 CSS Grid Garden 游戏？

如您所见，CSS Grid Garden 是一个交互式在线游戏，旨在学习和练习使用 CSS Grid Layout 模块。

在这个游戏中，目标是使用 Grid Layout 的 CSS 属性给胡萝卜浇水和毒害杂草。

先决条件

CSS Grid Garden 是一个有趣的教育工具，可帮助开发人员（尤其是初学者）以交互和有趣的方式掌握网格布局的关键概念。

了解 CSS 基础知识是一个加分项，但不是必需的。

如果您还不熟悉基础知识，这里有一个有用的链接，可以学习 CSS 网格的基础知识：CSS 网格基础知识

Grid Garden 有几个级别，可让您逐步了解 Grid Layout 的不同功能，例如定义列、行和网格区域。

这款网页游戏由与 Flexbox Froggy 相同的创作者创建：Codepip，可免费在 cssgridgarden.com 网站上在线访问。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。