カラーコード変換
HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。
CSS Grid ジェネレーター
固定列や自動調整のグリッドを実際の配置で確認し、CSS と HTML を生成できます。
このツールについて
カード一覧を組む前に、幅を変えながら列の並び方を試せます。
使い方
固定の列数か、最小列幅に応じた自動配置を選びます。行数・余白・配置・項目数を調整し、プレビュー幅で狭い画面も確認してください。CSS と HTML は個別にコピー・保存できます。
幅のスライダーはプレビューだけに影響します。固定グリッドは縦横 1～12、間隔 0～80 px、項目数 48 までです。生成コードは配置と基本寸法を含みます。内容に応じて装飾を追加してください。
よくある質問
列数を幅に合わせて変えるには？
自動調整を選び、最小列幅を指定します。出力は auto-fit と minmax を使います。プレビュー幅そのものは CSS に含まれません。
指定した行数より多く表示されるのはなぜですか？
行数は明示的なトラック数であり、要素数の上限ではありません。固定 3 列・2 行なら最初のセルは 6 個で、7 個目の要素には暗黙の行が追加されます。6 セルだけを試したい場合は、要素数も 6 にしてください。
関連ツール
新しいタブで開きます
コメント
0