【CSS】ゲームしながらgridを学習できる「Grid Garden」

CSS

2021年09月30日 8:00　

こんにちは、hgmです。

今回はCSSのgridを楽しく学ぶことができる「Grid Garden」についてご紹介します。

CSSのグリッドを使用しコードを書くことで、ニンジンを育てるWEB上のゲームです。
画面左側にCSSコードを書き、右側が合わせて変化していきます。

動きを確かめられるので、グリッドが分からなくても説明を読みながら進めることができ、初めてグリッドを使う方でも楽しく学べます！

全28ステージあり、序盤は使い方を学び徐々に応用的な問題になっていくので、実践にも役立ちそうです。

グリッドはレスポンシブなレイアウトに活躍するCSSなので、覚えておくと様々なシーンのレイアウトを実装することができるようになります。

一見flexboxと似ているようですが、双方でできることとできないことがあるのでレイアウトによって使い分けられるといいですね。

flexboxはまだ自信ない・・・というかたは下記もチェックしてみてくださいね！！

この記事を書いた人

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。猫センサー搭載済みの愛猫家。広い視野を持って日々邁進していきます！