Grid Wiz

Grid Wiz is a tool for developers who need a custom CSS Grid system. It generates a set of CSS class names for creating responsive layouts. You tell it what your grid should look like—like how many columns you want and which browsers you need to support—and it spits out the ready-to-use CSS. It's essentially a framework generator that avoids the bloat of larger, pre-built systems by giving you only the code you specify.

It works by letting you define parameters like column counts and breakpoints (small, medium, large, etc.) through a function. The tool then creates corresponding classes (like `.bx--col-md-4`) for your layout. What makes it stand out is its focus on modern CSS Grid features, including support for subgrids, column offsets, and responsive hiding. This means you can create nested grids where child elements understand the available columns, start columns at specific positions, or hide elements at certain screen sizes—all with clean, generated class names.

This tool is most useful for front-end developers and web designers building custom websites or applications. If you're tired of overriding a heavy framework like Bootstrap or need precise control over your grid's browser compatibility, Grid Wiz can save you time. Real-world use cases include building a custom design system from scratch, prototyping responsive layouts quickly, or maintaining a lightweight codebase for a project where every kilobyte counts.