占有セルではなく、グリッド線の数を数えてください。
レベルの散水目標を読み、対象エリアを囲む線を特定してください。グリッドの配置は境界線とトラックで記述されます。線番号は単に色付きセルの番号ではありません。CSS を入力する前に、開始境界と終了境界を指定してください。この小さな違いにより、ルールがカバーするエリアを、水が動いてから初めて確認するのではなく、予測しやすくなります。
タスクでスパンを使用する場合は、エリアがカバーするトラック数を考慮してください。これをピクセル距離に直接変換したり、両方のゲームで CSS が使用されているという理由だけでフレックスボックスの配置ルールを再利用したりしないでください。エディタで変更を1つ入力し、散水されたエリアを観察して、レベルで指定されたニンジンなどのターゲットと比較してください。現在のタスクによって、何が成功とみなされるかが決まります。視覚的に広い領域が必ずしも意図した解決策であるとは限りません。
結果の形状を利用してルールを診断してください。
水やり領域の開始位置が間違っている場合は、選択した開始境界を確認してください。開始位置は正しいものの、終了位置が早すぎるか遅すぎる場合は、終了位置または範囲を確認してください。方向が間違っている場合は、使用した行または列のプロパティを確認してください。幾何学的エラーに名前を付けることで、次の編集箇所を正確に特定でき、ルールの正しい部分を一度に複数置き換えてしまうことを防ぐことができます。
試行が成功したら、ターゲットを囲む線と、ルールがどのようにそれらを選択したかを説明してください。この説明は、後のレベルで異なるグリッドを使用したり、制約を組み合わせたりする可能性があるため、断片的な回答よりも役立ちます。このセンターは、実際のインタラクティブなCSSガーデンとそのレベルの手順をサポートしています。ピクセルベースのレイアウトチュートリアル、外部認定、すべてのバージョンでテストされた完全な解答シートを提供するものではありません。エディターの操作には再生ページを使用し、位置決めミスを重点的に確認したい場合は、こちらに戻ってきてください。
たとえば、水が 1 つのトラックを覆いすぎる場合は、目的の終了境界をマークし、入力した値またはスパンと比較します。正しい開始部分を変更せずに、終了部分を修正します。結果が別の行に移動する場合は、列ルールとは別に行ルールを検査してください。ターゲットが正しくカバーされたら、境界と軌跡を言葉で説明します。この演習は、CSS 配置を表示グリッドと接続することです。これは、前の回答文字列が目的の領域を選択しなくなった新しい配置で役立ちます。
Grid Gardenのヒントと戦略
次のプレイで試したいヒントにチェックしてください。このリストはゲームを変更せず、ゲームの進行状況も保存しません。
Grid Gardenに関する質問と回答
Grid Gardenはどのようなトピックを教えていますか？
庭園レイアウトパズルを通して、CSSグリッドを使ったインタラクティブな練習ができます。
私は動くキャラクターを操作できますか？
いいえ。主な操作は、グリッドの配置を変更するCSSを入力することです。
元の情報源は何ですか？
Thomas ParkのGrid Gardenは、MITライセンスのソースコードと、このレビュー版で使用されているCC BY 3.0のアートワークを提供します。
開始線が 2、終了線が 4 なら四マスを覆いますか？
いいえ。grid-column-start: 2 と grid-column-end: 4 は線 2 と線 4 の間、つまり二列のトラックを選びます。終了線は境界であり、追加の水やりマスではありません。線の間隔を数えるか span 2 を使い、行位置も変更する前に強調表示を確認しましょう。