当前位置: 首页 > 科技观察

寓教于乐,Grid布局小游戏GridAttack

时间:2023-03-18 11:59:13 科技观察

最近看了一眼CaniUseofCSSGrid:不得不说兼容性已经到了可以大规模使用的地步了。除了CSSGrid最近的一些新特性,比如spacinggap和grid-template-column:masonry支持瀑布流布局外,您可以放心地在您的业务中开始使用Grid布局。如何使用Grid从入门到精通?--Grid-Attack然而,CSSGrid的大语法总是容易让人望而却步。最近,我在寻找一种更好的方法来练习CSSGrid布局,并复习Grid语法。无意中发现了这个网站,一个闯关模式,从入门到精通Grid语法:WebSite-CSS-Grid-Attack[1]:通过游戏学习网格布局。GridAttack的一些简单介绍是IntroduceGridAttack。它的一些核心功能。Grid布局零基础的同学也可以尝试一下。游戏中有80个关卡。每一关开始前,都会介绍1或2个网格相关的属性,并给出相应的demo和讲解。通过demo,我们可以基本了解如何使用这个属性。然后,使用给定的提示和一些代码解锁关卡,并通过完成指定的网格布局进入下一关卡。试试吧好的,让我们实际尝试一下。这是#50,问题50。题目如下:题目中给出的代码:

#field{显示:网格;间隙:20px;网格模板:1fr1fr/1fr1fr;/*typehere*/}我们需要做的是完成我们的代码,这里的类型是标题所要求的。可以将正确的网格项目放置在绿色虚线和红色虚线的边界内。我们可以看到标题中有6个Grid项,但实际上只定义了一个2x2的网格布局grid-template:1fr1fr/1fr1fr。所以,这里考察的其实是Grid布局中的显示网格和隐式网格。网格。根据提示,需要grid-auto-columns和grid-auto-rows来控制额外网格的布局。我们需要定义代码,让最后两个网格项占据100px的高度。问题解决方法如下:#field{display:grid;间隙:20px;网格模板:1fr1fr/1fr1fr;/*typehere*/grid-auto-rows:100px;}右边的布局也会实时变化,更新如下:可以看到6个griditem被正确放置在绿色虚线的边框内和红色虚线。通过了这一关。这里其实我省略了一些过程,比如学习和理解grid-auto-columns和grid-auto-rows的过程。这个项目的有趣之处在于,有3种游戏模式,涵盖CSS网格知识的简单、中等和困难级别。二是它的互动性、趣味性的环境,让学习像玩一样,非常有趣。以下是官方给出的一些介绍图片:感觉写的有点像软文,不过确实是自己完成了80级,感觉收获还是很大的。初学者可以将其作为练习网站,在学习语法的同时进行巩固,已经有一定基础的可以将其作为复习工具,查漏补缺。网址:https://codingfantasy.com/games/css-grid-attack。尝试一下,打开网格布局的大门。最后,本文到此结束,希望对大家有所帮助!参考资料[1]网站-CSS-Grid-Attack:https://codingfantasy.com/games/css-grid-attack/play?mode=medium&love=true。