CSS Gridish is an IBM open-source tool that automatically generates multiple design and development resources from a single grid specification. Rather than providing a pre-designed grid system, CSS Gridish takes your team's custom grid design specifications and produces CSS Grid code with CSS Flexbox fallbacks, Sketch artboards with grid settings, and a Chrome extension for visual alignment checking. The tool addresses a practical problem in enterprise web development: many organizations cannot immediately adopt CSS Grid due to browser support requirements, particularly for Internet Explorer 11 and older Edge versions. CSS Gridish bridges this gap by generating both modern CSS Grid implementations and legacy-compatible Flexbox alternatives from the same configuration.
The core workflow involves creating a css-gridish.json configuration file in your project root that contains your design system specifications. This file defines breakpoints, margins, gutters, and other grid parameters. Users can then run the tool either as a one-time command using npx css-gridish or integrate it into their build process by installing the package and adding it to their npm scripts. The tool generates CSS and SCSS code into a css-gridish directory along with comprehensive README documentation detailing all available grid classes.
A distinctive feature of CSS Gridish is its handling of legacy browser support. The tool generates both standard CSS Grid files and legacy versions that use CSS Flexbox as a fallback. The legacy implementation supports embedded subgrids that maintain the overall grid system's column structure, allowing developers to nest grids while preserving alignment. The tool uses viewport width units and calc functions to enable semantic HTML with nested grid classes until browsers fully support the CSS Grid subgrid feature. For projects eventually dropping legacy support, developers can simply remove legacy classes and switch to non-legacy files as a progressive enhancement.
The configuration system is flexible and supports user-defined breakpoints with mobile-first opinions. The tool includes built-in examples demonstrating how it works with popular design systems including Bootstrap, Carbon Design System, and Material Design. These examples showcase the tool's versatility across different grid approaches and complexity levels. The README includes detailed FAQs addressing common questions about implementation choices, such as why grid-gap is not used by default and how column widths scale across breakpoints in the legacy implementation.
CSS Gridish is classified across multiple domains including CSS Grid, Layout Tools, UI Design, Frontend Development, Web Layout, Grid Systems, Design Editors, CSS Generation, Responsive Design, and Visual Builders. The project requires Node v8.2.0 or higher and is written primarily in CSS. The tool's documentation notes planned future updates, including removing viewport width unit dependencies once Edge and Safari support display subgrid, and potentially utilizing grid-gap once the CSS Grid spec provides a way for items to ignore gutters. The Chrome extension component extends the tool's utility beyond code generation, allowing team members to verify webpage alignment against the defined grid specifications directly in their browser.
