A free visual CSS Grid builder, code generator and learning platform.
CSS Grid is one of the most powerful layout tools in modern web development. But learning it from documentation or finished code examples can be slow and frustrating. You copy a snippet, change one value, and something breaks - but you do not know why.
Gridlock Holmes was built to change that. The idea is simple: let users see what each CSS Grid property does as they change it. When the layout updates live on screen, the rules start to make sense in a way that reading about them does not.
It is supported by carefully placed advertising designed not to interrupt the tools or learning experience. There is no signup or paywall.
We publish short posts about CSS Grid techniques, platform updates and new features on our blog.
Read the Gridlock Holmes blog →Jon has worked in the technology industry for many years across quality assurance, project management, transformation, change and client services. He has worked within a large global organisation as a QA professional, leading and supporting teams, improving processes and helping people work more effectively with complex technology.
Throughout his career, Jon has trained people with no prior QA experience to write test scripts and perform manual testing, as well as taught teams to use automation frameworks to verify test runs across multiple testing types. He has also created process documentation and flow charts, run team workshops to identify more efficient ways of working, and supported team members in developing their skills and progressing within their careers.
Jon holds an ISTQB qualification in software testing and PRINCE2 Foundation certification.
Gridlock Holmes was created with the same practical approach Jon has used throughout his career: breaking down technical concepts into clear, understandable steps and helping people learn by seeing how things work in practice.
No signup, no cost, ever
Live visual feedback on everything
Classroom resources for teaching CSS Grid
Clean, readable generated code
Supported by advertising, with no hidden costs or misleading design
New features in development