The CSS Grid generator that shows you the layout as you build it

Build layouts visually - adjust columns, rows, gaps and alignment and see them update in real time. Copy the finished code in CSS, Tailwind, JavaScript or SCSS.

Open the CSS Grid Generator Start the Learning Path

Free • No signup • CSS • Tailwind • JavaScript • SCSS

The Basics

What is a CSS Grid Generator?

A CSS Grid generator is a visual tool that helps you create page layouts using CSS Grid, without having to write all the code from scratch.

You can choose how many columns and rows you want, adjust the spacing between them, and see your layout change instantly in a live preview.

Without a generator, creating a CSS Grid layout can involve a lot of trial and error. You write some code, check how it looks in the browser, make changes, and repeat. A generator makes this much quicker because you can build the layout visually first, then copy the finished code when you are happy with it.

Most CSS Grid generators only give you CSS code. Gridlock Holmes can generate CSS, Tailwind, JavaScript and SCSS at the same time, so you can copy the version that suits the way your website or project is being built.

It also works alongside Grid Detective, a free tool that checks your grid code and helps you spot errors.

The Game Is AfootFree to use • No signup

Getting Started

How to use the CSS Grid generator

Create your grid in four simple steps. See your changes instantly, then copy the code when you are happy.

Set your columns

Choose how many columns you want and how wide they should be. Use flexible fr units, fixed px widths, or combine both.

Set your rows

Choose how many rows you want and how tall they should be. Use auto for flexible heights, or px and rem for fixed heights.

Adjust spacing and alignment

Choose the space between your rows and columns. Then adjust where your grid items sit. Your preview updates instantly as you make changes.

Copy your code

Choose CSS, Tailwind, JavaScript or SCSS. Then click Copy and paste the code into your project.

Flexible Code Output

One grid. Four language outputs.

Build your layout once. Copy the code in whichever language your project uses - all four outputs update simultaneously.

CSS

Standard CSS

Standard CSS using grid-template-columns, grid-template-rows, gap and all native grid properties. Clean output, no vendor prefixes.

Tailwind

Tailwind utility classes

Utility classes for Tailwind v3 and v4. Covers grid-cols, col-span, gap, and all supported Tailwind grid utilities.

JavaScript

Plain JavaScript

Sets grid layout via element.style in plain JavaScript. Useful for dynamic grids and component-based frameworks.

SCSS

Sass-friendly SCSS

Grid properties with Sass-friendly formatting. Slots straight into existing SCSS variables and mixins.

Presets

Start from a preset layout

Open a preset and adjust it to match your design - or start from a blank canvas.

Card Grid

Equal-width responsive cards. Uses repeat(auto-fill, minmax()) to wrap automatically at any screen width.

Holy Grail

Header, footer, main content and two sidebars. The standard page shell layout for most websites.

Dashboard

Top bar, sidebar navigation, main content area and a stats row. Built for app UIs and admin interfaces.

Magazine

Asymmetric columns for editorial and content-heavy pages. Mix large feature areas with smaller content blocks.

Why Use A CSS Generator

Generator vs writing CSS by hand

A generator doesn’t replace understanding CSS Grid. It simply makes prototyping faster by removing the constant edit-save-refresh cycle.

Use the generator to build and test your layout, then refine the code and use it in your project.

What matters	Writing CSS by hand	Gridlock Holmes generator
See changes	Only after save and refresh	Instantly, as you adjust
Error risk	Easy to mistype or miscalculate spans	Visual feedback catches errors before you copy
Learning curve	Memorise syntax first	Understand by seeing, then read the output
Output quality	As clean as you write it	Clean, consistent, no vendor prefixes

Closing note: The generator is a prototyping tool and a sanity check. Once your layout is right, the output is clean CSS you can ship directly or use as a starting point.

The Game Is AfootFree to use • No signup

Made For You

Who uses a CSS Grid generator?

Students & Beginners

Beginners learning CSS Grid. No experience needed - the visual feedback shows what each property does before you need to write any code.

See CSS Grid for Beginners →

Designers & Prototypers

Designers translating Figma layouts to CSS. Set up the same column structure, gaps and alignment and copy the CSS to match your design exactly.

See CSS Grid for Designers →

Junior & Senior Devs

Developers who want to prototype grid layouts quickly and copy clean code in CSS, Tailwind, JavaScript or SCSS - without the edit-save-refresh cycle.

See CSS Grid for Developers →

Teachers & Trainers

Teachers using Gridlock Holmes in classroom sessions. Students can build layouts visually, then export and discuss the code.

Get Educator Resources →

Grid Detective

Built your layout? Now check the code.

Paste your finished grid code into Grid Detective and it will flag any errors, warnings or improvements - in plain language, with a suggested fix.

Use Grid Detective

Questions

Frequently asked questions

What does the CSS Grid generator do?

It lets you build CSS Grid layouts visually by adjusting column counts, row heights, gaps and alignment. A live preview shows the result as you work. When the layout is right, copy the code.

What code languages does it output?

CSS, Tailwind, JavaScript and SCSS. All four outputs update simultaneously, so you can copy whichever format your project uses.

Is the CSS Grid generator free?

Yes, completely free. No signup, no account and no limit on how many layouts you build or copy.

Can I build a responsive grid with it?

Yes. Use the auto-fill mode with minmax() to create a responsive card grid that wraps automatically at any screen width - no media queries needed.

How is this page different from the Gridlock Holmes homepage?

This page explains what the CSS Grid generator is and how to use it. The Gridlock Holmes homepage is the generator itself - open it and start building.

What if my grid layout is not working?

Use Grid Detective. Paste your CSS, Tailwind, JavaScript or SCSS code and it will identify errors, explain what is wrong and suggest a fix.

Does the generator support subgrid?

Subgrid support is in development. The current generator covers all core CSS Grid properties including named areas, auto-fill, auto-fit, minmax() and grid-template-areas.