📜 グリッドシステムの歴史とWebデザインへの進化（後編）— CSS Gridがもたらす“意図を扱う”設計

5. 🧩 もう1枚残っていた：等間隔のその下に

「幅固定・列数可変」によって、グリッドは柔軟な構造を手に入れました。
しかし、まだもう1枚──等間隔のその下に隠れていた層が存在します。
それが「非等間隔グリッド」という、意図を持つ構成の世界です。

🔹 等間隔の効率と、非等間隔の意図

等間隔は合理的です。
統一された寸法と整列は、認知のしやすさ・保守のしやすさを両立させます。
その一方で、ページ全体が“同じ重さ”になるという弱点もあります。

非等間隔は、この均一性の中に抑揚とリズムを持ち込みます。
「自由」ではなく、「意図的な差異」によって構造に意味を与えるのです。

観点	等間隔グリッド	非等間隔グリッド
目的	整列と秩序の維持	主従・リズム・情報の重み付け
特徴	均質・安定・汎用性	意図的な偏り・非対称性
効果	一貫した可読性	文脈・階層・注目点の表現
使いどころ	汎用テンプレート、一覧レイアウト	特定セクション、情報構成の強調

• CSSサンプル

/* [ID]=内容に合わせる / [件名]=24ch〜伸びる / [担当]=12ch上限で切る / [更新日]=固定 */
grid-template-columns: max-content minmax(24ch, 2fr) fit-content(12ch) 10rem;

• Tailwind

<div class="grid gap-4 [grid-template-columns:max-content_minmax(24ch,2fr)_fit-content(12ch)_10rem]">
  <!-- <div class="truncate">件名</div> 等で省略 -->
</div>

🔸 メリットとデメリット

非等間隔は「全体を支配するルール」ではなく、
局所的な構成要素として扱うのが現実的です。

区分	内容	解説
✅ メリット	1. 主従関係を表現できる	重要情報を広く、補助情報を狭く配置できる。
	2. 視覚リズムを作れる	1:2などの比率で反復し、単調さを防ぐ。
	3. 固定要素を自然に共存	固定ナビやサイドバーを float なしで内包できる。
⚠️ デメリット	1. 汎用化しにくい	ページ構成に依存しやすく、再利用が難しい。
	2. 意図の共有が必須	チームで“なぜこの幅か”を説明する必要がある。
	3. レスポンシブ設計が複雑化	minmax() や auto-fit 併用で緩和可能。

🎵 1:2のリズムという現実解

非等間隔は“全部バラバラ”にすると途端に使いづらく、正直、適用先は一覧系くらいに限られてしまう。
でも、1:2の繰り返しや 固定＋可変の組み合わせなど、リズムのあるパターン化なら実用性が高い。

.grid {
  display: grid;
  /* 1:2 の反復（大・小・大・小） */
  grid-template-columns: 1fr 2fr 1fr 2fr;
  gap: 1rem;
}

ポイント：

• “全部バラバラ”は避ける（ルールが崩れて保守が死ぬ）
• 反復リズムを使う（1:2, 2:3 など少数比で）
• 固定＋可変を混ぜる（例：12rem 1fr 2fr）で主従を明示

Tailwindなら任意値でこうも書ける：
class="grid [grid-template-columns:1fr_2fr_1fr_2fr] gap-4"

実務メモ：

• ソース順＝読み順は崩さない（非等間隔でもDOM順はそのまま）
• RTL/縦書き環境で破綻しないかを軽く確認
• テキスト量の増減に備え、長文での overflow と折返しを点検

🌗 非等間隔という“眠れる知識”

非等間隔グリッドは、使いどころが難しい。
秩序や再利用を重視する現代のフロントエンド設計では、
どうしても「扱いづらい」「保守が大変」という評価になりがちです。

それでも、
等間隔では届かない表現や構成が必要になる瞬間があります。
情報の重みを変えたいとき、ページにリズムを生みたいとき、
あるいは、機械的な整列をあえて崩して“人の目線”を取り戻したいとき。

非等間隔は、主流にはなれない。
けれど、“知っている人だけが気づける解法”として、
いつか日の目を見ることがある。

💬 まとめ：秩序の下に構成がある

等間隔は秩序を作る。
非等間隔は構成を作る。

そしてその構成は、グリッドの上に描くものではなく、
グリッドそのものの中に設計するものになった。

「非等間隔」は設計の主役ではない。
だが、“秩序”という表面を一枚めくった下に、
たしかにもう一層、デザインの呼吸がある。

---

※本記事の一部は生成AI（ChatGPT）による校正・文体調整を行っています。内容の最終確認・責任は筆者にあります。