CSS Grid生成ツール｜行・列・間隔を設定してCSSを作成

このツールでできること

行数、列数、間隔、配置を設定し、見た目をプレビューしながらCSS Gridのコンテナ用CSSと対応するHTMLを生成できます。CSSとHTMLはそれぞれコピーできます。

使い方

1. 行数、列数、行の最小サイズを入力します。
2. 行と列の間隔、グリッド全体の縦配置とアイテムの配置を選びます。
3. プレビューで配置を確認します。
4. 「CSSとHTMLを生成」を押し、用途に合わせて各コードをコピーします。

入力例・出力例

初期設定の行数2、列数3、行の最小サイズ80px、行・列の間隔16px、各配置stretchで生成すると、CSSは次のようになります。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(80px, auto));
  column-gap: 16px;
  row-gap: 16px;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
}

対応するHTMLには、行数×列数となる6件の子要素を生成します。

<div class="grid-container">
  <div class="grid-item-1">グリッドアイテム1</div>
  <div class="grid-item-2">グリッドアイテム2</div>
  <div class="grid-item-3">グリッドアイテム3</div>
  <div class="grid-item-4">グリッドアイテム4</div>
  <div class="grid-item-5">グリッドアイテム5</div>
  <div class="grid-item-6">グリッドアイテム6</div>
</div>

よくある利用場面

• 均等幅のカード一覧や画像グリッドの基本コードを作るとき
• 行数・列数・gapを変えながら配置を確認するとき
• コンテナCSSと必要数の子要素HTMLをまとめて生成するとき

処理仕様

• 列数と行数は1〜12の整数です。行の最小サイズは0〜2000、行・列の間隔は0〜200の数値を入力でき、それぞれpxまたはremを選べます。
• 列はrepeat(列数, minmax(0, 1fr))の均等幅、行はrepeat(行数, minmax(最小サイズ, auto))で生成します。
• 「グリッド全体・縦」はalign-content、「アイテム・横」はjustify-items、「アイテム・縦」はalign-itemsへ反映します。均等な列が横幅を使い切るため、justify-contentは出力しません。
• CSSセレクターとHTMLの親クラスは.grid-container固定です。HTMLの子要素は行数×列数だけ作り、grid-item-1から始まる連番クラスを付けます。
• 有効な入力変更はプレビューへすぐ反映され、以前に生成したCSSとHTMLは無効になります。不正な値の入力中は最後の正常なプレビューを保持し、生成時は最初の不正な入力へフォーカスします。
• 行の最小サイズは120px相当、行・列の間隔は32px相当を上限として、プレビュー内だけ縮小する場合があります。生成CSSには入力値と選択単位をそのまま使用します。
• CSSとHTMLは別々の読取専用結果欄へ実際の改行を保って表示します。HTMLのタグは画面上で実行しません。

入力データについて

設定内容とCSS・HTML生成はブラウザ内だけで処理し、ToolRollのサーバーや外部サービスへ送信しません。Cookie、Web Storage、IndexedDBへ保存する処理もありません。各コピーボタンを押したときだけ、対応するコードを端末のクリップボードへ書き込みます。