TailwindCSSについて自分なりのチートシートを作る。#5 Columns編

初めに

TailwindCSSを使うときに、思うように動かせなかったりすることが多いなと個人的に感じていて、なので一度全体的にまとめておこうと思いこの記事を書いています。

第一弾目は、疑似クラスについてまとめました。
第二弾目は、レスポンシブデザインについてまとめました。
第三弾目は、ダークモードの実装についてまとめました。
第四弾目は、コンテナについてまとめました。

第五弾目は、Columnsについてまとめていきたいと思います。

Columnsの基本的な使い方

TailwindCSSでは、columns-{n} を使うことで、コンテンツを指定した列数に分割することができます。

<div class="columns-2">
  <p>1つ目の段落</p>
  <p>2つ目の段落</p>
  <p>3つ目の段落</p>
</div>

このように、要素が2列に自然に流し込まれます。

最小列幅ベースのレスポンシブColumns

クラス名	最小列幅	備考
columns-xs	20rem	約320px
columns-sm	24rem	約384px
columns-md	28rem	約448px
columns-lg	32rem	約512px
columns-xl	36rem	約576px
columns-2xl	42rem	約672px
...	...	columns-7xlまで存在

• columns-smは「各列の最小幅が24rem（約384px）になるように」列数が自動で決まる。
• これにより、画面サイズに応じて最適な列数を維持できるため、特にレスポンシブなカードレイアウトなどに非常に便利です。

break-inside-avoid について

Columnsを使うと、1つの要素が途中で改行されて別の列に分かれてしまうことがあります。
それを防ぐには、break-inside-avoidクラスを使います。これで、要素が列の途中で分割されずにまとまって表示されるようになります。

<div class="columns-2">
  <div class="break-inside-avoid mb-4 p-4 bg-white shadow">
    <h2 class="text-xl font-bold">タイトル</h2>
    <p>本文の内容</p>
  </div>
</div>

ColumnsとGridの違いを簡単に比較

特徴	Columns	Grid
レイアウト方式	自然な縦分割	明確に定義された行・列
高さの統一	されない	自動的に揃う（同じrowにある場合）
よく使う場面	テキストやカードの自然な折り返し	規則的なデザイン・均等なカード配置など

実際のレイアウト例

<div class="columns-3 gap-4">
  <div class="bg-blue-100 p-4">Column 1</div>
  <div class="bg-blue-100 p-4">Column 2</div>
  <div class="bg-blue-100 p-4">Column 3</div>
  <div class="bg-blue-100 p-4">Column 4</div>
  <div class="bg-blue-100 p-4">Column 5</div>
  <div class="bg-blue-100 p-4">Column 6</div>
</div>

実行結果

break-before-columnについて

ある要素の直前で新しい列を開始させたいときに使用します。

<div class="columns-2 gap-6">
  <p>これは記事の最初の段落です。読者にとって興味深い導入文がここに書かれます。</p>
  <p>2つ目の段落です。ここでは話の背景や補足情報が説明されます。</p>

  <!-- ↓ここで新しいカラムに切り替わる -->
  <h2 class="break-before-column text-xl font-bold text-blue-700">セクション2:次の話題へ</h2>
  <p>この段落はセクション2の内容です。新しい話題に入るので、新しいカラムから始めると読みやすくなります。</p>
</div>

実行結果

break-after-columnについて

指定した要素のあとで、現在のカラムを強制的に終了させ、新しいカラムに切り替えます。例えば、「この項目はここで終わり！次の内容は新しいカラムで見せたい」という時に便利です。

<div class="columns-2 gap-4">
  <!-- グループ1 -->
  <div class="break-inside-avoid p-4 bg-green-100">グループ1 - カード1</div>
  <div class="break-inside-avoid p-4 bg-green-100">グループ1 - カード2</div>

  <!-- ↓ ここで次のカラムに切り替える -->
  <div class="break-after-column"></div>

  <!-- グループ2 -->
  <div class="break-inside-avoid p-4 bg-blue-100">グループ2 - カード1</div>
  <div class="break-inside-avoid p-4 bg-blue-100">グループ2 - カード2</div>
</div>

解説

• columns-2 によって2カラムレイアウトになっています。
• break-after-column が指定された空の div によって、そこまでの要素で1つ目のカラムを終わらせて、以降の要素が2つ目のカラムの先頭から始まるようになります。
• break-inside-avoid を使うことで、各カードの内容が途中でカラムをまたいで分断されるのを防いでいます。
  実行結果