向いているケース
- Grid/Flexboxのプロパティを毎回覚えていられず、プレビューを見ながら値を決めたいとき。
- カード一覧やギャラリーレイアウトの土台となるCSSを素早く作りたいとき。
- justify-content/align-itemsの挙動の違いを実際に試して確認したいとき。
プレビューを見ながらレイアウトを調整し、CSSコードを生成します。
作りたいレイアウトの種類を選ぶ
プレビューを見ながら数値を変更
生成されたコードをそのまま利用
いいえ。プレビューもCSS生成もすべてブラウザ内で完結しており、外部には送信されません。
現バージョンでは列・行を均等または一律の固定幅で生成する機能のみ対応しています。個別セルの結合（span）は生成後に手動で調整してください。
本ツールはコンテナのCSSのみを生成します。子要素（アイテム）はプレビューと同じ数のdiv等をご自身のHTMLに合わせて配置してください。
CSS GridとFlexboxのレイアウトを、列数・行数・gap・配置（justify-content/align-items）などの設定値を調整しながらプレビューし、そのままコピーできるCSSコードを生成する無料ツールです。