Tailwind CSS 練習問題 73：レイアウト（段組み）
📊 Qraftユーザーの成績
- 難易度 Bランク（レーティング1200）
- 難易度 766位/2795問中
- 正答率 —（0回）
Tailwind CSSにおいて、テキストなどを複数列に分割するレイアウトを構築したい場合、正しいものはどれか。
- `grid-cols-3` クラスを指定し、要素内のコンテンツを新聞のように3段組みにして配置する。
- `flex-cols-3` クラスを指定し、要素内のコンテンツを新聞のように3段組みにして配置する。
- `columns-3` クラスを指定し、要素内のコンテンツを新聞のように3段組みにして配置する。
- `layout-3` クラスを指定し、要素内のコンテンツを新聞のように3段組みにして配置する。
- `split-cols-3` クラスを指定し、要素内のコンテンツを新聞のように3段組みにして配置する。
正解と解説を見る
正解：`columns-3` クラスを指定し、要素内のコンテンツを新聞のように3段組みにして配置する。
Tailwind CSSにおいて、要素内のコンテンツを新聞のように3段組みにして配置する場合、`columns-3`クラスを使用するのが正解です。
【正解の理由】
CSSのカラムレイアウト（`columns` プロパティ）を利用するためのユーティリティクラスとして `columns-{count}` が用意されています。`columns-3` を指定すると、テキストや画像のリストなどが自動的に3つの列に分割され、下から次の列へと折り返して表示されます。
【不正解の理由】
• 「`grid-cols-3` クラス」は誤り。これはCSS Gridの列数を指定するものであり、新聞のような文章の自然な折り返し（段組み）を単一のコンテナで行うものではありません。
• 「`flex-cols-3` クラス」は誤り。Flexboxの方向を指定する `flex-col` はありますが、列数を指定する `flex-cols-3` というクラスは存在しません。
• 「`layout-3` クラス」は誤り。Tailwindにそのようなレイアウト用クラスはありません。
• 「`split-cols-3` クラス」は誤り。分割を意味する単語ですが、Tailwindのクラス名としては採用されていません。