ToolHub logoToolHub
Color & CSS Tools

CSS Grid Generator

列数・行数・gapを指定してCSS Gridを生成。

1
2
3
4
5
6
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 8px;

使い方

  1. 列数・行数・gapを設定
  2. CSSをコピー

CSS Grid Generatorについて

列数・行数・gapを調整しながらレイアウトをプレビューし、CSS Gridのコードを生成する無料ツールです。

よくある質問

可変列(grid-template-columnsの個別指定)はできますか？

現バージョンは均等列のみ対応です。

関連ツール

Color Picker

カラーピッカーで色を選び、HEX/RGB/HSL値を取得します。

使ってみる

RGB to HEX

RGB値をHEX(16進数)カラーコードに変換します。

使ってみる

HEX to RGB

HEXカラーコードをRGB値に変換します。

使ってみる

Gradient Generator

2色と角度からCSSグラデーションを生成します。

使ってみる

おすすめツール

JSON Formatter

JSONを読みやすく整形します。インデント、改行を自動付与。

使ってみる

Regex Tester

正規表現とテキストのマッチをリアルタイムで確認できます。

使ってみる

QR Code Generator

URLやテキストからQRコードを生成します。

使ってみる
← Color & CSS Toolsの一覧に戻る