Grid Detective

Find and fix CSS Grid errors

Paste your grid code into Grid Detective, and it will check it for common mistakes, missing properties and problems with how the grid is set up; then it will explain what to fix and why.

Check my code now Start the learning path

Free to use • No signup needed • Works with CSS, Tailwind, JS and SCSS

How it works

Three steps to better grid code

1. Paste your code

Works with full stylesheets or just the grid container. Partial code is fine.

2. Analyse

Grid Detective checks for errors, warnings and improvements across your code.

3. Fix and understand

Plain-English explanation, not just an error code. Understand why it broke.

🔍 Grid Detective

Paste your code below and we'll check it for errors, warnings and tips.

Building a grid from scratch instead? Try the Grid Generator, which includes this same detective tool alongside a live layout builder.

Detection

Common CSS Grid mistakes it can find

Items spanning beyond the available columns or rows

Missing display: grid on the grid container

Incorrect use of the fr unit

Alignment settings that may cause unexpected results

Problems with grid spacing and gaps

Named grid areas that do not match

Items being automatically placed somewhere unexpected

Invalid values used with minmax()

Learn CSS Grid step by step Open Generator

Stop guessing why your grid broke

Paste your code above and get a plain-English breakdown in seconds.

Check my code Open Gradient Tool CSS Grid Generator