CSS Grid ジェネレーター

What Is the CSS Grid Generator?

The CSS Grid generator is a free visual tool for building CSS Grid layouts without writing code by hand. Adjust the number of columns and rows, set gap sizes, customize grid-template-columns and grid-template-rows values, and control all four alignment properties. The live preview updates instantly so you can see exactly how your grid will look before copying the CSS.

CSS Grid is the most powerful layout system available in CSS. It is a two-dimensional system that handles both rows and columns simultaneously, making it ideal for full-page layouts, card grids, dashboards, and any design that requires precise placement of elements on both axes.

How to Use the CSS Grid Generator

1. Use the Columns and Rows sliders to set the grid dimensions.
2. Adjust Column Gap and Row Gap to control spacing between cells.
3. Edit grid-template-columns and grid-template-rows directly for custom values like 200px 1fr auto.
4. Set alignment properties to control how items and the grid itself are positioned.
5. Watch the live preview update in real time.
6. Click Copy to copy the generated CSS to your clipboard.

Features

• Visual live preview with numbered grid items
• Column and row count sliders (1–8)
• Column gap and row gap sliders (0–64px)
• Editable grid-template-columns and grid-template-rows fields
• justify-items, align-items, justify-content, align-content controls
• One-click CSS copy
• Runs entirely in your browser — no data sent to servers

FAQ

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay out items in rows and columns simultaneously, making it ideal for page layouts, dashboards, and any design that requires precise control over both axes.

What is the difference between CSS Grid and Flexbox?

Flexbox is one-dimensional — it lays items out in a single row or column. CSS Grid is two-dimensional — it controls both rows and columns at the same time. Use Flexbox for components and small-scale layouts; use Grid for larger page-level layouts.

What does 1fr mean in CSS Grid?

1fr is a fractional unit that represents one fraction of the available space in the grid container. For example, grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first.

What is the difference between justify-items and justify-content?

justify-items aligns grid items within their individual cells along the inline (row) axis. justify-content aligns the entire grid within the container along the inline axis — only has an effect when the grid is smaller than the container.