Grid Garden - Lv. 22/28 grid-template-columns が受け取れるのはパーセンテージだけではありません。 ピクセルや em などの単位も指定できます。異なる単位を混ぜて使うことさえできます。ここでは、3列をそれぞれ 100px、3em、40% と指定してみましょう。…

Grid Garden - Lv. 15/28 grid-column と grid-row をあわせて使えば、もっと広いグリッドも指定できます。試してみてください！ #garden { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%; } #water…

Grid Garden - Lv. 8/28 もう一度 grid-column-end で span キーワードを使ってニンジンに水をやってみてください。 #garden { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%; } #water { grid-colu…

Grid Garden CSSグリッドを使用してキャロットガーデンにどれだけよく世話をすることができますか? このゲームでは、2次元グリッドレイアウトをケーキにする強力な新しいモジュールであるCSSグリッドをマスターすることで、ニンジン作物に水をやり、雑草を毒…

3つのレイアウト手法 floatレイアウト flexboxレイアウト gridレイアウト float レイアウトの問題点 横並びにしたブロックの高さを揃えられない 横並びにしたブロックは上揃えにしかならない 幅の計算があわないとカラム落ちする float解除の仕組みが分かり…