QR コード生成
セルをまたいでアイテムをドラッグしてCSSグリッドレイアウトをビジュアル的に構築し、CSSをエクスポートできます。
このツールについて
カスタムトラックサイズ（fr、px、%、auto）で列と行を定義し、ギャップを設定し、ライブグリッドプレビューでクリックドラッグして複数のセルにまたがるアイテムを配置できます。ツールはすぐにコピーできるgrid-template-columns、grid-template-rows、gap、grid-column/grid-row宣言を生成します。名前付きグリッドエリアをオプションで割り当てることもできます。
使い方
- 1 ステップ1：列数（1〜12）と行数（1〜8）、ギャップサイズを設定してください。
- 2 ステップ2：fr、px、%、autoの単位を使用して各列と行のトラックサイズを入力してください。
- 3 ステップ3：グリッドセルでクリックしてドラッグして、アイテムを配置してサイズを調整してください。
- 4 ステップ4：生成されたCSSをコピーしてスタイルシートに貼り付けてください。
What CSS Grid does, and what this tool generates
CSS Grid is the layout system for two-dimensional design — rows and columns at the same time — and it replaces the float and table hacks that web developers once relied on. This generator lets you define a grid visually, drag items across cells to place and size them, and copy the exact CSS it produces. The output is plain, standard CSS Grid: it needs no framework, no build step, and works in every modern browser. The value is that the two most error-prone parts of writing grid by hand — track-size syntax and the item placement lines — are generated correctly for you.
Defining the tracks
You set the number of columns (1–12) and rows (1–8), then describe their sizes as a space-separated list. The size list is where the real power of Grid lives, and you can mix units freely:
| Unit | Means | Example use |
|---|---|---|
fr | A fraction of the leftover space | 1fr 2fr — second column twice as wide as the first |
px | A fixed pixel width | 240px — a sidebar that never changes size |
% | A percentage of the container | 50% 50% — two equal halves |
auto | Sized to its content | auto 1fr — label hugs its text, field fills the rest |
The fr unit is what makes Grid feel effortless. Unlike percentages, fractions automatically account for the gap between tracks and for any fixed-size tracks, distributing only the remaining space. A layout of 240px 1fr gives you a fixed 240px sidebar and a main column that flexibly takes everything else — no manual subtraction required.
Placing items by dragging
The preview shows the empty grid as clickable cells. Click and drag from a starting cell to an ending cell, and the tool creates an item spanning that rectangle. Internally each item records a column start, a row start, a column span, and a row span — so an item dragged from column 1 to column 3 across the top row becomes a header that spans three columns. Every placed item is editable in the Items list below, where you can rename it and adjust its start lines and spans with number inputs, or remove it with one click on the item itself.
A worked example: a classic page layout
Build the familiar header / sidebar / main / footer layout. Set columns to 240px 1fr and rows to auto 1fr auto, with a gap of 16px. Then drag items:
- Drag across the top row, both columns — a header spanning 2 columns.
- Drag the left cell of the middle row — a sidebar in column 1.
- Drag the right cell of the middle row — the main content in column 2.
- Drag across the bottom row, both columns — a footer spanning 2 columns.
The generated CSS gives you a container with display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; gap: 16px;, followed by a rule per item placing it with grid-column and grid-row — for example .header { grid-column: 1 / span 2; grid-row: 1 / span 1; }. Read 1 / span 2 as "start at line 1 and span two tracks." Those placement lines are the part people most often get wrong by hand, so having them written for you is the main time saver.
Named grid areas — the readable alternative
Tick the Named Areas option and the tool generates a different, often more maintainable form. Instead of numeric line placement, it emits a grid-template-areas map — a visual ASCII diagram of your layout in the CSS itself — and gives each item a grid-area: name;. The header/sidebar/main/footer example would produce a template like:
grid-template-areas: "header header" "sidebar main" "footer footer";
This is genuinely powerful: the CSS now looks like the layout it describes, and rearranging the page is as simple as rewriting the diagram. Cells with no item are filled with a . dot, which is the standard syntax for an empty grid area.
Tips and common mistakes
- Match your size list to your track count. If you list three column sizes but only have two columns, the third is ignored; if you list too few, the remaining columns fall back to a sensible default. Changing the column or row count auto-pads the size list with
1frvalues so it stays in sync. - Reach for
frbefore%. Percentages do not subtract the gap, so50% 50%with any gap overflows its container. Fractions handle the gap automatically — use1fr 1frinstead. - Named areas must form rectangles. Every named region in a
grid-template-areasmap has to be a solid rectangle; an L-shape or a split area is invalid CSS the browser will reject. If you assign the same name to non-adjacent cells, fix the placement so it forms a single block. - Gap replaces margins between cells. Use the
gapproperty for spacing between grid items rather than adding margins to the items themselves — margins fight the track sizing and break the clean fractional math. - Don't confuse track lines with track counts. A 3-column grid has 4 vertical lines (numbered 1 through 4).
grid-column: 1 / span 3spans all three columns; thinking in spans, as this tool outputs, avoids the off-by-one errors that plague hand-written line numbers.
Privacy note
The grid is built and the CSS is generated entirely in your browser. Nothing you design is uploaded or stored on a server, so the tool works completely offline.