WORK 05 / RESPONSIVE GRID PLANNER

レスポンシブカードグリッド設計ツール

カードの最小幅や余白を設定すると、画面幅ごとの列数とカード幅、切り替わり幅、実装用コードをまとめて確認できます。

SETTINGS

グリッドを設定

120〜800pxの整数

0〜120pxの整数

1〜8の整数

0〜120pxの整数

1〜12の整数

トラック生成方式

PREVIEW

グリッドプレビュー

縮尺プレビュー
1200px
1200px
Card 1カードタイトルボタン
Card 2カードタイトルボタン
Card 3カードタイトルボタン

3列・カード幅 328px

RESULT

現在幅の計算結果

プレビュー幅
1200px
利用可能なグリッド幅
1032px
現在の列数
3列
現在のカード幅
328px
空きトラック数
0
最大グリッド幅
1032px
auto-fit

空きトラックを折りたたみます。カード数が少ない場合は、カードが残り幅まで広がります。

カード幅は設定した最小幅以上です。親要素が外枠幅より狭い場合は、実際の親要素幅に依存します。

BREAKPOINTS

列数が切り替わる外枠幅

現在適用中のauto-fit・カード3枚の設定で、実際に到達する列数を表示しています。

列数必要な内容幅左右余白を含む目安
2列504px536px
3列768px800px

ページ全体を利用できる場合の目安です。親要素が狭い場合は、親要素の幅に依存します。

IMPLEMENTATION

実装用HTML・CSS

HTML

現在のカード数を反映した最小構成です。実案件では用途に応じて要素や内容を変更してください。

<div class="grid-shell">
  <div class="card-grid">
    <article class="card">Card 1</article>
    <article class="card">Card 2</article>
    <article class="card">Card 3</article>
  </div>
</div>

CSS

最大列数をmax-widthで制限し、狭い画面ではカードをコンテナ内へ収めます。

.grid-shell {
  padding-inline: 16px;
}

.card-grid {
  --card-min-width: 240px;
  --card-gap: 24px;

  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, var(--card-min-width)), 1fr));
  gap: var(--card-gap);
  max-width: 1032px;
  margin-inline: auto;
}

このツールの制約