戻る
CSS Grid / Flex レイアウト生成
開発ツール
読み込み中
ツールを読み込んでいます
ツールを準備しています。残り時間はまだわかりません。
このツールの処理はすべてブラウザー内で行われ、入力内容はサーバーへ送信されません。
このツールについて
Grid の列幅や Flex の方向・折り返し・間隔・整列を視覚的に設定し、リアルタイム表示して HTML/CSS をコピーします。
主な用途
- ブログのカードや一覧に使う Grid を生成する。
- Flex の方向・折り返し・整列の設定を試す。
使い方
- 1.Grid または Flex を選択し、列幅・間隔・項目数を設定します。
- 2.折り返し・方向・整列を調整してプレビューします。
- 3.生成された HTML と CSS を自分のページにコピーします。
制限と注意事項
- Grid は最大 8 列、プレビュー 30 項目、間隔 0–64 px です。
- サイズは制限した px・rem・%・fr、または auto/min-content/max-content を使います。Flex basis では fr を使えません。
- 任意の CSS 関数・変数・メディアクエリー・ドラッグ並べ替え・レスポンシブ分岐は非対応です。
よくある質問
minmax() や CSS 変数は使えますか？
任意のスタイルがページへ影響しないよう、限定したサイズ文法を使います。コピー後に自分のプロジェクトで高度な指定を追加できます。
どのようなコードが生成されますか？
.layout コンテナー、番号付き項目、選択したレイアウト宣言と最小限の項目スタイルを生成します。自由に調整できます。