CSS Grid Generator

Build your layout. Take the code.

Arrange rows, columns and items visually. Preview your layout at any size, then export clean HTML and CSS.

CSS Grid layout builder

Layout

ColumnsRows

Changing tracks repacks items. Undo restores your previous layout.

Column gap (px)Row gap (px)

Minimum row height (px) Stack on small screens

Below 640px, items stack in HTML order.

Selected item

Select an item Label

Start columnStart row

Column spanRow span

Select an item in the preview. Use the position and span controls to arrange it.

Live preview

Preview width

Read-only code. Use the layout controls to update the code and live preview.

CSS is layout-only. Download HTML includes both code and example styling.

Your layout stays in your browser

Your layout is a starting point. Build the rest.

Download your HTML, open it in Phoenix Code, and add your content with Live Preview.

Download Phoenix Code Open browser editor

From an idea to a CSS Grid layout

CSS Grid arranges content in rows and columns. This visual CSS grid generator lets you build card galleries, sidebar layouts and dashboards without writing every grid rule by hand. The preview uses the same layout CSS as your export.

How to generate your grid

Choose Cards, Sidebar or Dashboard as your starting layout.
Set the columns, rows and gaps. Select an item to change its position or span.
Test a smaller preview width, then copy the CSS or download a complete HTML example.

Responsive by design

Enable “Stack on small screens” to generate a 640px media query. On smaller screens, items return to one column in HTML order. Desktop and tablet previews are scaled to fit your workspace; the displayed pixel width is the actual preview viewport.

What the builder supports

Use up to 12 equal-width columns, 12 rows and 48 items. Rows grow with their content. Items cannot overlap. Changing the track count repacks your items; if they cannot fit, your last valid layout is preserved. For custom track sizes, nested grids or additional breakpoints, edit the exported CSS in Phoenix Code.

CSS Grid questions

Does the downloaded layout need a library?

No. The export uses native HTML and CSS Grid. The downloaded HTML is a complete example with embedded styles, and works without this generator or an internet connection.

What is the difference between CSS Grid and Flexbox?

Grid controls rows and columns together, making it useful for page layouts and card collections. Flexbox lays items out along one axis, making it useful for toolbars and navigation. A page can use both.

Is my layout uploaded anywhere?

Layout generation and export run locally in your browser. Layout values, labels and generated code are excluded from analytics. Refreshing resets the builder, so download your HTML to keep your work.

Keep building: HTML Viewer HTML Formatter Color Picker

Generated CSS (read-only) Generated HTML (read-only) Item Generated CSS Grid layout Add rows or remove an item to make room. These tracks cannot fit all your items. Add rows or remove items first. That position overlaps another item or extends outside the grid. Choose a free position or a smaller span. Enter a whole number within the range shown by this control. Layout updated. Previous layout restored. Code copied. Could not access the clipboard. Select the code and copy it manually. HTML downloaded. Open the file in Phoenix Code to keep building. Could not create the download. Copy the HTML and CSS instead. Stacked layout Grid layout Item selected. Use arrow keys to move this item. Hold Shift to change its span. Starting layout loaded. Undo restores your previous work. Starting layout loaded. This builder supports up to 48 items. Default layout restored. Undo is available. Default layout restored.