メニュー一覧グリッド
中段 / 目安 25分
「大変！メニューが8品に増えたの」。陽葵さんがレジ横の黒板を指さします。「問1のカードを並べて、ずらーっと綺麗に見せたい。縦に8個ずーっと続くのは、なんか違うのよね」。たしかに、細長い1列は読むのに疲れます。
カードは HTML に8枚ぶん置いてあります。あなたの仕事は、これを3列に並べ、カードとカードのあいだに隙間を作ることです。
完成条件
- カード8枚を包む親要素に
class="menu-grid"を付ける .menu-gridを3列で並ぶようにする- カードどうしのあいだに隙間（
gap）を空ける - カード（
.menu-card）に角丸と余白を付ける
進め方
並べ方の指示は、並ぶもの自身ではなく親に出します。カード1枚ずつに「3列で並べ」と言っても伝わりません。親を「格子の箱」に変えると、中の子が自動で行と列に収まります。
列の数は grid-template-columns で決めます。ここには「1列ぶんの幅」を列の数だけ並べて書きます。1fr は「余った幅を分け合った1つぶん」という意味なので、これを3つ並べれば幅の等しい3列になります。隙間は gap の1行で、縦横まとめて空きます。margin で隙間を作ると端に余分な余白が残るので、格子では gap を使ってください。
同じ幅の列が続くときは、繰り返しをまとめて書く方法もあります。列が10列に増えた日に効いてきますが、まずは素直に3つ並べて構いません。
課題
- カード8枚の親要素に
class="menu-grid"を付ける .menu-gridを格子（grid）にして3列で並べる- カードのあいだに
gapで隙間を空ける .menu-cardに角丸と余白を付ける
ヒント
前のヒントを開くと次が開きます。開かずに解けると未開封クリアです
ヒント 2ヒント 1 を開くと読めます
ヒント 3ヒント 2 を開くと読めます