CSS Grid Generator – Build Grid Layouts Visually

Our free CSS grid generator shows numbered items in a live preview so you can see the layout as you build it. It is useful for image galleries, card sections, dashboards, pricing tables and page layouts, and it includes presets you can use as a starting point.

CSS Grid Properties Explained

Column Size Options

• 1fr: each column takes an equal share of the free space.
• auto: columns are as wide as their content.
• 100px: fixed-width columns.
• minmax(100px, 1fr): columns are at least 100px but grow to fill the space.
• repeat auto-fit: as many 120px+ columns as fit, which makes the grid responsive without media queries.

How to Use the CSS Grid Generator

Step 1: Pick a Grid Layout Preset

Click 3 x 2 grid, Gallery, Responsive cards, Centered items or Two columns to load a common layout.

Step 2: Set Columns, Rows, Gaps and Alignment

Drag the Columns and Rows sliders, choose a column size, set the column and row gaps and pick justify-items and align-items.

Step 3: Check the Grid Preview Live

The numbered cells in the preview update instantly, so you can see how many items fit and how they line up.

Step 4: Copy the CSS Grid Code

Click Copy CSS and paste the .grid rule into your stylesheet. Add class="grid" to the parent element and put your items inside it.

Front-end developers use the CSS grid generator to sketch a layout quickly, and learners use it to see what each grid property does. The CSS grid generator is free, needs no account and creates code you can paste into any stylesheet, Sass file or CSS module.

Common CSS Grid Mistakes

• Putting display: grid on the items instead of on the parent.
• Using percentage widths plus gaps, which makes the grid overflow its container.
• Setting a fixed number of columns that is too many for mobile screens.
• Forgetting that grid items stretch to the row height unless align-items is changed.

Responsive Grid Without Media Queries

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

This one rule shows one column on phones, two or three on tablets and more on large screens. Change 240px to the smallest width your cards should have.

CSS Grid Generator Tips

• Use fr units instead of percentages so gaps are taken into account automatically.
• Make an item span two columns with grid-column: span 2.
• Use gap rather than margins on the items to keep spacing even.
• Combine grid for the page layout with flexbox inside each card.
• Set align-items: start if you do not want items in a row to stretch to the same height.

The CSS grid generator writes standard CSS that works in all modern browsers.

Frequently Asked Questions