Free CSS Grid Tools & Learning

Free CSS Grid and gradient tools for developers and students

Use the free visual CSS Grid builder to drag columns, test gaps, generate code in CSS, Tailwind, JavaScript or SCSS and see every change live on screen.

Build or fix CSS Create a gradient Start learning

Free to use • No signup needed • CSS • Tailwind • JavaScript • SCSS

Start here

What do you want to do today?

Choose the route that matches how you want to use Gridlock Holmes.

Learn CSS Grid

Step-by-step lessons in CSS, Tailwind, JS and SCSS

Start learning →

Build a Layout

Build CSS grid & gradients visually, adjust and generate code instantly

Open generator →

Fix My Code

Paste broken grid code and see what's wrong

Use Grid Detective →

I Teach CSS Grid

Free slides and classroom exercises

Get resources →

CSS Grid Generator

Build layouts without guessing

Adjust columns, rows, gaps and colours while the layout updates live on screen. Copy clean code when you're done

Start from ready-made layouts: Holy Grail, card grid, dashboard, magazine, masonry, app shell
Adjust columns, rows and spacing visually
Style items with solid colours or gradients
Generate code in CSS, Tailwind, JavaScript or SCSS

Open the visual generator

Grid Detective

Find and fix CSS Grid errors

Paste your grid code and Grid Detective will check it for common mistakes, missing properties and logic errors - then explain what to fix and why.

Works with CSS, Tailwind, JavaScript and SCSS
Colour-coded results: errors, warnings and tips
Plain-English explanations, not just error codes
No login or signup required

Check my code Learn CSS Grid

Grid Detective results showing fixed CSS Grid errors

Gradient Tool

Create CSS gradients you can actually see

With this free CSS gradient generator, choose colours, directions, stops and styles visually - then copy the finished CSS in one click. Works seamlessly with your grid layouts too.