Tailwind CSS 練習問題 47：グリッドレイアウト（カラムの結合）
Tailwind CSSにおいて、CSS Gridレイアウトを使用している際、特定の要素に2列分の幅を占有させたい（結合させたい）場合、正しいクラスはどれか。
- 「col-span-2」を指定する
- 「grid-cols-2」を指定する
- 「span-col-2」を指定する
- 「col-width-2」を指定する
- 「width-col-2」を指定する
正解と解説を見る
正解：「col-span-2」を指定する
要素に2列分の幅を占有させたい場合、「col-span-2」が正解です。
【正解の理由】
Tailwind CSSでは、CSS Gridレイアウトの子要素がまたがる列数を指定するために「col-span-{n}」というユーティリティクラスを使用します。2列分結合する場合は「col-span-2」となります。
【不正解の理由】
• 「『grid-cols-2』を指定する」は、親要素に対して全体を2列のグリッドにする設定であり、子要素の結合指定ではないため誤り
• 「『span-col-2』を指定する」は、Tailwind CSSに存在しないクラス名であるため誤り
• 「『col-width-2』を指定する」は、Tailwind CSSに存在しないクラス名であるため誤り
• 「『width-col-2』を指定する」は、Tailwind CSSに存在しないクラス名であるため誤り