UUUP Tools

デザインツール

Tailwindグリッドビルダー - クラスとプレビュー

columns、gap、item count から Tailwind Grid class を生成し、live preview で確認できます。card grid、prototype layout、column 数の素早い実験に向いています。

クイック切替→CSS Grid ジェネレーター
TailwindGridLayout
クイック切替:CSS Grid ジェネレーターFlexbox ジェネレーター

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻る すべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

  • card grid をすばやく組み始める
  • prototype layout 用 class を生成する
  • column 数を試しながら比較する

使い方

  1. columns と gap を設定する
  2. sample item count を調整する
  3. preview を見て Tailwind class をコピーする

入出力サンプル

設定

3列 / gap 4

出力

grid grid-cols-3 gap-4

FAQ

完全な component まで生成しますか？

対象は Grid class と preview が中心です。実際の HTML 構造は project 側で組み合わせてください。

responsive breakpoint 付きで出力されますか？

出力は現在の columns と gap に絞っています。breakpoint が必要なら md: / lg: prefix を手動で追加してください。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

CSS Grid ジェネレーター

CSS Grid ジェネレーター - 行、列、gap

利用可能

列数、行数、gap を設定し、基本的な display:grid レイアウトを生成できます。track 構造をプレビューし、簡易テンプレートを試しながら、管理画面レイアウトやカードグリッド向けの CSS / HTML をコピーできます。

CSS Grid Layout
ツールを開く

Flexbox ジェネレーター

Flexbox ジェネレーター - 1 次元レイアウトの視覚調整

利用可能

flex-direction、justify-content、align-items、wrap、gap をライブプレビュー付きで調整できます。box の追加・削除で折り返しや余白を確認し、生成された CSS と HTML scaffold をそのままプロジェクトへ持ち込めます。

Design CSS Layout
ツールを開く