Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using thegrid-column-startproperty. For example,grid-column-start: 3;will water the area starting at the 3rd vertical grid line, which is another way of saying the 3rd...
CSSGrid Free How well can you tend to your carrot garden using CSS grid? In this game, you must water your carrot crops and poison the weeds by mastering CSS grid, a powerful new module that makes 2-dimensional grid layouts a piece of cake. With it you can define columns, rows, and...
Grid Garden 有几个级别,可让您逐步了解 Grid Layout 的不同功能,例如定义列、行和网格区域。 这款网页游戏由与 Flexbox Froggy 相同的创作者创建:Codepip,可免费在cssgridgarden.com网站上在线访问。
*/#garden{display: grid;grid-template-columns:100px3em40%;grid-template-rows:20%20%20%20%20%;} 效果: repeat(value, width)函数, value:列|行数 width:列|行宽 示例: /*创建8列,每列占12.5%的宽度*/#garden{display: grid;grid-template-columns:repeat(8,12.5%);/*等同于:grid-template-colum...
Grid Garden 这款游戏总共有28关,你可以从中学习CSS网格布局。它涵盖了以下网格属性:grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area、order、grid-template-columns、grid-template-rows以及grid-template。 游戏地址:https://cssgridgarden.com 代码库:https...
Grid Garden1是Codepip2创建的一款寓教于乐的在线网页游戏,游戏共有28关。玩家可以通过过关的方式掌握CSS最新标准CSS Grid。 游戏的设定是一个花园种植胡萝卜的场景,玩家通过在代码区填写CSS Grid的相关代码完成除草、浇水等任务。通过玩家的辛勤劳作,一定能够吃上纯天然、无公害的胡萝卜。
3) Grid Garden A sequel to Flexbox Froggy. This time it’s about CSS grid. In this game, you have to take care of a garden in different ways. You do that by writing the correct CSS commands that would hopefully get you the desired result. The game has 28 levels starting from the ...
Grid Garden Grid Garden is a game for learning CSS grid layout. Check it out atcssgridgarden.com. Author Thomas Park Twitter Homepage GitHub My gratitude to these contributors for their translations. Don't see your language on the list? Add it!
http://www.w3cplus.com/css3/a-complete-guide-css-grid-layout.html 看过基础概念,其实很多熟悉类似于flex 最重要的就是怎么合并单元格! 通过这个game我收获了很多 http://cssgridgarden.com 其中一些题目还是挺有意思的,我来分享一下吧 #17 通过设置gird-area:row-start|column-start|column-start|column-...
9. Grid 攻击 网址:Grid 攻击[9] 简介:该游戏包含80个关卡,带你体验类似真实场景下的网格布局情况 Grid 攻击 10. CSS 选择器备忘清单 网址:CSS 选择器备忘清单[10] 简介:该网站是用来测试你对 CSS 选择器的理解。前面的几个相当简单,但是随着进入更高级的选择器(如使用较少的伪类) ,练习的难度会增加。