レイアウトユーティリティ — FlexboxとGrid - Tailwind CSS実践ガイド

TailwindのFlexbox・Gridユーティリティを使うと、横並びや複雑なレイアウトをHTMLだけで素早く組めます。

学習者

レイアウトって flex と grid どっちを使えばいいの？いつも何となくで選んじゃう…。

先生

ざっくり「1方向（横一列・縦一列）の並びは flex、行と列の2次元レイアウトは grid」が目安。まずはこの章で両方の基本を押さえよう。

Flexbox

flex クラスで Flexbox コンテナになります。

<!-- 基本の横並び -->
<div class="flex gap-4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>
 
<!-- 両端に配置 -->
<div class="flex justify-between items-center">
  <span>ロゴ</span>
  <nav>メニュー</nav>
</div>
 
<!-- 中央揃え -->
<div class="flex justify-center items-center h-screen">
  <p>画面中央</p>
</div>

よく使うFlexクラス一覧

クラス	CSS
`flex`	`display: flex`
`flex-col`	`flex-direction: column`
`flex-wrap`	`flex-wrap: wrap`
`items-center`	`align-items: center`
`items-start`	`align-items: flex-start`
`justify-center`	`justify-content: center`
`justify-between`	`justify-content: space-between`
`justify-end`	`justify-content: flex-end`
`gap-4`	`gap: 1rem`
`flex-1`	`flex: 1 1 0%`
`flex-none`	`flex: none`
`grow`	`flex-grow: 1`
`shrink-0`	`flex-shrink: 0`

CSS Grid

grid クラスでGridコンテナになります。

<!-- 3列グリッド -->
<div class="grid grid-cols-3 gap-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
 
<!-- レスポンシブグリッド -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- カード -->
</div>
 
<!-- 2列、左が固定・右が可変 -->
<div class="grid grid-cols-[240px_1fr] gap-6">
  <aside>サイドバー</aside>
  <main>メインコンテンツ</main>
</div>

よく使うGridクラス一覧

クラス	CSS
`grid`	`display: grid`
`grid-cols-3`	`grid-template-columns: repeat(3, minmax(0, 1fr))`
`grid-cols-[240px_1fr]`	カスタム値（任意の値）
`col-span-2`	`grid-column: span 2`
`col-span-full`	全幅にまたがる
`gap-4`	`gap: 1rem`
`gap-x-4`	`column-gap: 1rem`
`gap-y-8`	`row-gap: 2rem`

コンテナ

<!-- 最大幅を制限して中央揃え -->
<div class="container mx-auto px-4">
  コンテンツ
</div>

container クラスは各ブレークポイントで max-width を設定します。

position 系

<!-- 固定ヘッダー -->
<header class="fixed top-0 left-0 right-0 z-50 bg-white">
  ナビゲーション
</header>
 
<!-- 親要素に対して絶対配置 -->
<div class="relative">
  <span class="absolute top-2 right-2 text-xs">バッジ</span>
</div>

ちゃんと使うためのポイント

flex items-center gap-4 の組み合わせは非常によく使う
グリッドのカラム数はブレークポイントと組み合わせてレスポンシブにする
任意の値は grid-cols-[240px_1fr] のように角括弧で指定できる

次の章では、余白（margin・padding）のスペーシングユーティリティを学びます。