LocalToolsオフラインブラウザツール集

カテゴリー: 開発ツール

CSS Gridジェネレーター

サイト側で企画したツールツールが見つからない？

grid-templateのレイアウトを組み立ててCSSをコピー

列数・行数・間隔をライブのグリッドプレビュー上で設定できます。任意で列をminmax()トラックに切り替えると、折り返す前に列を縮小させられます。完成したコンテナ宣言はそのままコピーできます。ここでの操作はすべてブラウザ内で完結します。

出力
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

このツールでできること

grid-template-columns: repeat(n, 1fr) は等幅の列を作りますが、内容量以下には縮まないため、狭い画面ではみ出します。minmax(min, 1fr) に置き換えると、グリッドが折り返しをあきらめる前に、各列を下限まで縮められるようになります。これがスマートフォンでも読みやすいレイアウトと、そうでないレイアウトの違いです。このツールは同じ操作から両方の記法を組み立てるので、実際のグリッド上でその違いを確認できます。

使い方

  1. 列数と行数を設定します。
  2. セル間の間隔を設定します。
  3. 狭い画面で列を縮ませたい場合はminmax()列をオンにし、CSSをコピーします。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

プレビューは実際のCSS Gridですか。
はい。番号付きのセルは、設定中の grid-template-columns と grid-template-rows そのままでレイアウトされています。
minmax() は具体的に何を変えますか。
minmax() を使わない repeat(n, 1fr) の列は等幅を保ちますが、内容量以下には縮まないため、狭いコンテナでは単純にはみ出します。minmax(min, 1fr) を使うと、ブラウザが別の収め方を探す前に、各列を最小値まで縮められます。
何かがアップロードされることはありますか。
いいえ。宣言は設定した項目から組み立てられるテキストであり、プレビューのグリッドもページ内でローカルに描画されます。

すべてのツールに戻る