design
無料
サインアップ不要
QR コード生成
セルをまたいでアイテムをドラッグしてCSSグリッドレイアウトをビジュアル的に構築し、CSSをエクスポートできます。
ツールを読み込み中…
このツールについて
カスタムトラックサイズ（fr、px、%、auto）で列と行を定義し、ギャップを設定し、ライブグリッドプレビューでクリックドラッグして複数のセルにまたがるアイテムを配置できます。ツールはすぐにコピーできるgrid-template-columns、grid-template-rows、gap、grid-column/grid-row宣言を生成します。名前付きグリッドエリアをオプションで割り当てることもできます。
使い方
- 1 ステップ1：列数（1〜12）と行数（1〜8）、ギャップサイズを設定してください。
- 2 ステップ2：fr、px、%、autoの単位を使用して各列と行のトラックサイズを入力してください。
- 3 ステップ3：グリッドセルでクリックしてドラッグして、アイテムを配置してサイズを調整してください。
- 4 ステップ4：生成されたCSSをコピーしてスタイルシートに貼り付けてください。