It has been a big year for Gridlock Holmes. What started as a single CSS Grid generator has grown into a small toolkit for anyone who writes, teaches or debugs grid layouts. Here is everything that shipped in 2026, and a little of what is coming next.

Grid Detective is now its own page

Grid Detective, our layout debugger, used to live as a panel bolted onto the generator. It now has a dedicated page with a bigger analysis panel, clearer error grouping, and room to explain why a rule is flagged, not just that it is. Paste in a broken grid and you get a categorised list of issues: errors that will break the layout, warnings that will cause subtle bugs, and tips for cleaner code.

Why it matters: separating Grid Detective from the generator means you can drop it into an existing project's CSS without needing to rebuild the layout from scratch first.

What it catches

  • Overflow traps: grid items with images or long text that ignore their track's minmax() because of the default min-width: auto.
  • Orphaned grid-area names: areas referenced in grid-template-areas that never got a matching grid-area declaration.
  • Legacy syntax: old grid-gap / grid-column-gap properties mixed in with modern gap.

Four coding paths for learning

The Learn hub now offers four parallel paths so you can practise grid in whichever syntax you actually use day to day:

  • CSS: plain grid-template-columns, fr units, and named areas.
  • Tailwind: the same layouts built with utility classes like grid-cols-12 and arbitrary values.
  • JavaScript: reading and writing computed grid styles at runtime, useful for dashboards that reflow dynamically.
  • SCSS: grid mixins and variables for teams that already have a Sass build step.

Each path shares the same exercises, so you can start in CSS and switch to Tailwind later without losing your place.

Gradient tool refresh

The gradient builder got a smaller but useful update: a live code panel that updates as you drag swatches, one-click copy for both CSS and Tailwind gradient classes, and a wider set of preset angles for radial and conic gradients.

.card {
  background: linear-gradient(135deg, #4F46E5 0%, #3B82F6 55%, #F97316 100%);
}

Free resources for educators

If you teach CSS, whether in a bootcamp, a classroom, or a company onboarding, the For Educators page now has downloadable lesson plans, a printable grid cheat sheet, and a bank of "spot the bug" exercises built from real Grid Detective reports. All of it is free, no account required.

What is next

Early 2027 work is focused on subgrid support in Grid Detective's analysis, plus a shareable link for saved layouts so you can send a grid setup to a teammate without pasting raw CSS into Slack. If there is something specific you would find useful, the feedback link in the footer goes straight to the team.