メインコンテンツへスキップ
LibraTool logoLibraTool

無料CSSグリッドジェネレーター

CSSグリッド（トラック、単位、ギャップ）を視覚的にデザイン。生成されたCSSとHTMLをコピー

読み込み後はオフラインでも動作
プリセット
列 (3)
行 (2)
ライブプレビュー
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 すべてブラウザで実行されます。何もアップロードされません。

使い方

CSSグリッドを視覚的にデザインできます：最大8列8行を追加し、各トラックをfr、px、auto、min/max-contentに設定し、行／列の間隔を調整できます。番号付きのライブプレビューは即座に更新され、生成されたgrid-templateのCSSと対応するHTMLはワンクリックでクリップボードにコピーできます。

  1. 1
    グリッドを形作る
    +と−で列と行を追加／削除します。
  2. 2
    トラックを設定する
    各列と行にはそれぞれ独自の単位（1fr、100px、autoなど）が設定できます。
  3. 3
    間隔を調整する
    row-gapとcolumn-gap用の別々のスライダー。
  4. 4
    コードをコピーする
    プロダクション対応のCSSと対応するHTMLの骨組み。

すべてブラウザ内で動作します — 何もアップロードされません。

関連ツール

↔️

CSSフレックスボックスジェネレーター

フレックス方向、ラップ、justify、align をライブアイテムで実験。CSSをコピー

試してみる
📐

CSS クランプ() ジェネレーター

レスポンシブなタイポグラフィとスペーシングのための流動的なCSS clamp()値を生成します。最小・最大サイズとビューポート範囲を設定し、ライブプレビューを確認して、1行のCSSをコピーできます。

試してみる
📓

印刷用の用紙 — 罫線・方眼・ドット・各種ノート用紙（PDF）

罫線（ワイド罫・カレッジ罫）、方眼、ドット方眼、アイソメトリック、書写練習、五線譜、コーネル式ノートなどのオリジナル用紙を印刷できます。A4、Letter、A5、Legal に対応し、線の色も自由、必要なページ数だけ作れます。ブラウザー内で作成する、鮮明なベクター PDF です。

試してみる

よくある質問