CSS Grid Generator

How to Use the CSS Grid Generator

This CSS Grid Generator helps you build responsive grid layouts visually and instantly copy the HTML + CSS. Follow the steps below to create your own grid structure.

➤ 1. Set Your Grid Columns

At the top of the tool, enter your grid-template-columns value.

Popular examples include:

• repeat(3, 1fr) → 3 equal columns
• repeat(auto-fit, minmax(200px, 1fr)) → responsive card layout
• 200px 1fr 1fr → fixed + flexible mix

You can also click any of the preset chips to insert a ready-made layout instantly.

➤ 2. Adjust Row & Column Gaps

Use the Row gap and Column gap fields to set spacing between grid items.

• Row gap = vertical spacing
• Column gap = horizontal spacing

Examples:

• 12px gap = standard UI spacing
• 24px gap = spacious gallery layout

This updates in real time inside the live preview.

➤ 3. Choose Alignment Options

CSS Grid gives full control over how elements sit inside each cell.

Set:

• align-items → vertical alignment
• justify-items → horizontal alignment

Options include:

• stretch
• flex-start
• center
• flex-end

This helps you create centered cards, stretched items, top-aligned content, etc.

➤ 4. Select How Many Items to Show

The Items in preview setting doesn’t affect your CSS. It only updates the preview so you can see how your grid behaves with:

• 3 items
• 6 items
• 10 items
• etc.

This is useful for designing galleries, dashboards, and card layouts.

➤ 5. View Your Live Grid Preview

Everything you change updates instantly in the preview:

• Columns
• Gaps
• Alignment
• Number of items

You can visually test how the grid responds without writing code.