Grid Garden（グリッドガーデン）とは

Grid Garden は、「CSS Grid Layout（二次元グリッドレイアウト）」を、庭のにんじんを育てながら学ぶゲーム形式のWebアプリです。
にんじんが植わっている区画だけに水をやるような形で、CSSのプロパティを使って「どこに置くか・どの区画を選ぶか」を指示することでゲームを進めます。
遊びながら学べるので、飽きずにCSS Gridの基本概念が身につきます！

主な機能・特徴

使い方（学び方/遊び方）

インストール、ログイン不要ですぐにプレイして学べます。

①ステージ（レベル）を選んでゲームを始める
ステージ（レベル）は任意に選んでゲームをスタートできます。
にんじんの畑が表示され、「この区画に水をやりなさい」等の指示と共に、どのCSSプロパティを使うかが提示されます。

②CSSを記述
指定されたプロパティを入力欄に書き、どの列／行から／どの列／行まで要素を配置するかなどを指定します。
ステージが進むにつれて、「grid-column-end」「grid-row-start」「grid-row」「grid-area」「order」などさまざまなCSS Gridのプロパティが出てきます。
ステージごとに新しいルールを学びながら進んでいきます。

③レベルのクリア／次のレベルへ
にんじんに水があたるか、雑草が正しく避けられるかなどで結果が変わります。
正解なら次のステージへ、間違っていたら入力を修正してなんどでも挑戦可能です。

活用例

• CSS Gridをこれから使えるようになりたい初心者が、基礎を身につけるために
• Webサイトのレイアウト（カード型レイアウト／写真ギャラリー／ダッシュボードなど）を設計する前に、Gridの使い方を練習して感覚を掴んでおきたいときに
• スクールやオンライン講座で、受講生に楽しみながらレイアウト学習させたいときに

注意点

※完全に初めてCSS Gridに触る人でも使えますが、事前に「行（row）」「列（column）」「開始位置／終了位置（start / end）」といった基本用語を少し予習しておくと理解が早いです

※Grid Garden では「グリッド線」を数える必要があります。
「何番目の線から何番目の線まで」など、線の数え方が甘いと正解にならないことが多いため、画面上のグリッド線を丁寧に数える習慣をつけるのがポイントです

※ゲームの中では基礎的な動きが中心です。実際のWeb制作では複数要素の入ったレイアウトやユニット（％、fr、pxなど）の使い分けなども出てくるので、ゲームで学んだ後は実際のコーディングで練習するのをおすすめします