みなさんこんにちは！おさかなです！
今回は「GRID GARDEN」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・CSSの「グリッドレイアウト（Grid）」を学びたい方
・無料の「グリッド学習サイト」を探している方
・HTMl/CSSを学習中の方
「GRID GARDEN」って何？
「GRID GARDEN」とは、ゲーム感覚で「グリッドレイアウト（Grid）」が学べるサイトのことです。全28問。Gridを利用して、畑のにんじんに水やりをして育てながら、CSSが極められます！(いいね)
↓FlexBoxバージョンもあります🐸
実際に使ってみよう！
基本操作
それでは早速サイトにアクセスしましょう！
左側が、コードの「入力画面」です。(はい！)
右側が「出力画面」になります。
最初の課題は、水をにんじんの位置まで移動する基本的なコードです！(ふむふむ…。)
「grid-colum-start」プロパティを使って、水をにんじんのところへ移動させてみましたー！(おお！)
課題をクリアしたら「次へ」ボタンが押せるようになります。(ポチっと)
(ひと休み🍮)
課題を進めよう！
それでは課題をどんどん進めていきましょう！(おー！)
レベル2では、雑草を取り除くという課題となっています。
レベル1同様「grid-colum-start」プロパティを使って、雑草を除去します。
（アニメーションもついていて、可愛い🌱）
レベル3では「grid-colum-end」プロパティを使って、複数列に水やりしていきます！(よし！)
ちなみに値は「縦線」を基準に決めます。
今回は4番目の縦線まで、水やりしたいので「grid-colum-end: 4;」とすればOKです！(おー！)
レベル4も、引き続き「grid-colum-end」プロパティを使います。(ふむふむ…。)
こちらは別解として「マイナスの値」を使うことも可能です！
レベル5に進みます。（あっ…マイナスの値についての問題、先取りしてしまった。笑）
レベル5では「負の値（マイナス）」について、学習できます！(えい！)
さらに課題を進めていくと、にんじんの数が増えたり…。（畑っぽい💧）
水と除草剤？の混合課題も！(おお〜！)
レベル24の課題おもしろい！
みなさんも是非「Gridレイアウト」を極めて、CSSスキルを強化してみてください〜✨(お疲れ様です🍵)
アクセスフラッシュ！！
それはグリッドマン。笑
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
