ToolPremier Logo
ToolPremier

Home  ›  Developer Tools  ›  CSS Grid Generator

CSS Grid Generator
Design CSS Grid layouts visually – define columns, rows, and gaps, place items across tracks, and copy the complete CSS for your container and grid items.
✓ Free✓ No signup✓ Privacy first✓ Runs in your browser
CSS Grid Generator – ToolPremier

Visual CSS Grid generator · set columns rows gaps sizing · live preview · copy CSS

How it works
Convert in three steps

1. Define your grid structure

Set the number of columns and rows, column and row sizes (px, fr, %, auto), and gap values for your grid container.

2. Place your grid items

Click and drag on the grid canvas to define where each item starts and ends - spanning multiple columns or rows as needed.

3. Copy the CSS

Get the container grid-template-columns, grid-template-rows, and gap properties plus each item grid-column and grid-row placement rules.

FAQ
Common questions
fr stands for fractional unit – it represents a fraction of the available space in the grid container after fixed and min-content sized tracks are accounted for. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle one is twice as wide as the others, and all three fill the available width proportionally. fr units are the key to building flexible, responsive grid layouts without calculating percentages.
Use Grid when you are laying out content in two dimensions – both rows and columns matter simultaneously. A page layout with a header, sidebar, main content area, and footer is a natural Grid use case. Use Flexbox for one-dimensional content – a row of buttons, a navigation bar, a column of stacked cards. Most modern UI uses both: Grid for the overall page shell, Flexbox for component-level arrangement inside grid areas.
grid-template-areas lets you name regions of your grid using a visual syntax in your CSS, then place items into those named regions with grid-area. For example, defining areas for header, sidebar, main, and footer makes the layout intent clear and readable in the stylesheet, rather than tracking column and row numbers.
The most practical approach is grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) – this creates as many columns as fit at a minimum of 250px wide, each growing proportionally. It is fully responsive without any media queries for the column count. For more controlled breakpoints, combine Grid with media rules to redefine the column count at specific viewport widths.
Keep going
Related tools

Flexbox Playground

Build the component-level layouts inside your Grid areas.

Open tool

CSS Gradient Generator

Add gradient backgrounds to your grid container or items.

Open tool

Box Shadow Generator

Add shadows to grid-placed elements.

Open tool

Border Radius Generator

Round corners on grid item cards.

Open tool
About the CSS Grid Generator
CSS Grid is the most powerful layout system available in CSS – it handles two-dimensional layouts that previously required tables, floats, or complex positioning workarounds. But the syntax for grid-template-columns, track sizing with fr units, and item placement with grid-column and grid-row spans is not always intuitive to write from scratch. This generator gives you a visual canvas: define your column and row structure, drag items to span the tracks you want, and get the CSS for both the container and each placed item. It is useful for prototyping page layouts, learning Grid interactively, or quickly generating the boilerplate CSS for a component you are building.
Benefits
  • Visual grid canvas - click and drag to place items across columns and rows without writing span values.
  • fr unit support - build flexible, proportional track sizing without calculating percentages.
  • Generates both container and item CSS - complete output for direct use in a stylesheet.
  • Covers grid-template-columns, grid-template-rows, gap, grid-column, and grid-row.
Privacy
All grid generation runs client-side in your browser. No layout data is transmitted to any server.