Introducing CSS Gridish: An Open Source Tool to Help Your Team Adapt CSS Grid Today

CSS Grid is revolutionizing web layout. For the first time, we have a true 2-dimensional layout system designed specifically for the web. It gives us unprecedented control over both the rows and columns of our web pages, enabling designs that were previously difficult or even impossible.

However, despite the power and flexibility that CSS Grid offers, many teams have been hesitant to adopt it. Concerns about browser compatibility, difficulties translating designs to code, and lack of familiarity with the new syntax have prevented many from taking advantage of this groundbreaking tool.

That‘s why I‘m excited to introduce CSS Gridish, an open source project from IBM designed to help teams overcome these barriers and start benefiting from CSS Grid today.

What is CSS Gridish?

CSS Gridish is a suite of tools that enables designers and developers to define and utilize a common grid system across design mock-ups and code. At its core is a simple JSON configuration file where you specify the parameters of your grid, such as column widths, row heights, and gutters.

From this central configuration, CSS Gridish generates:

1. A Sketch file with artboards and layout guides reflecting your grid spec, for designers to use as a template
2. CSS/SCSS code implementing your grid spec with CSS Grid, along with a fallback implementation using CSS Flexbox for older browsers
3. A Chrome extension that overlays your grid on any webpage, allowing designers and developers to easily verify alignment and proportions

By unifying your grid system across tools and codebases, CSS Gridish helps your team adopt a consistent, resilient, and flexible layout foundation.

Addressing Browser Compatibility

One of the primary concerns that holds teams back from adopting CSS Grid is browser compatibility. As of 2019, CSS Grid has achieved widespread browser support, with over 92% of internet users globally utilizing a browser that supports it, according to Can I use.

However, many organizations still need to support the remaining 8%, which largely consists of Internet Explorer 11 and older mobile browsers. Even tech giants like IBM aren‘t immune—as of 2019, ibm.com still receives over 6% of its traffic from IE11 alone.

CSS Gridish addresses this need for backwards compatibility by automatically generating two parallel CSS implementations of your grid spec:

1. yourGrid.css – a pure CSS Grid implementation for modern browsers
2. yourGrid-legacy.css – a hybrid implementation that leverages CSS Grid in modern browsers, with a fallback to CSS Flexbox for older browsers

The legacy stylesheet utilizes feature detection to serve the appropriate implementation based on the capabilities of the user‘s browser. Here‘s a simplified example of what that fallback code might look like:

/* Modern browsers */
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 16px; 
  }
}

/* Legacy browsers */
@supports not (display: grid) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
  .grid > * {
    flex: 1 1 8.33%; 
    margin: 8px;
    min-width: 0;
  }  
}

So with CSS Gridish, you can start leveraging the power of CSS Grid without sacrificing support for legacy browsers. And when the time comes to drop support for those legacy browsers, simply swap out the legacy stylesheet with the pure CSS Grid one and enjoy the simplicity and performance benefits of a modern implementation.

Bridging Design and Development

Another challenge that CSS Gridish addresses is the disconnect that often occurs between design mock-ups and their implementation in code. It‘s all too easy for important layout details to get lost in translation as a static comp is converted into a responsive web page.

CSS Gridish solves this by establishing your grid specification as a single source of truth across design and development tools. Designers start their mock-ups with a Sketch file pre-configured with artboards and guides matching your grid spec, ensuring that their designs are built on the same proportions and rhythms that developers are working with.

To close the loop between design and implementation, the CSS Gridish Chrome extension allows you to overlay your grid spec on top of any web page. With the click of a button, designers and developers can verify that the implemented layout is pixel-perfect with the original design.

Enabling a New Era of Web Layout

Beyond helping teams adopt CSS Grid, CSS Gridish also lays the foundation for a new paradigm of web layout and componentry.

Historically, web layout has been constrained by the one-dimensional nature of flow-based layout models like block and inline. This has led us to build component libraries and design systems oriented around elements that expand to fill their horizontal container, with less consideration for vertical rhythm and proportion.

CSS Grid opens the door for us to think in two dimensions, building components that are aware of and adapt to their placement within a grid. Imagine defining a "card" component that renders itself differently depending on whether it‘s placed in a wide column or a narrow sidebar, while still maintaining consistent alignment and proportions with surrounding elements.

By establishing your grid as a central specification with CSS Gridish, you‘re not just adopting a powerful new layout tool, you‘re establishing the foundation for a more purposeful and resilient design system.

Case Study: IBM and CSS Gridish

At IBM, we‘ve seen firsthand the benefits that CSS Gridish can bring to a large-scale, distributed design system.

Prior to CSS Gridish, our various web properties were utilizing an assortment of different grid systems and layout tools, leading to inconsistencies and inefficiencies across teams. Designers were spending valuable time manually drawing out grid guides on their mock-ups, and developers were writing custom CSS for each implementation.

By standardizing on CSS Gridish, we‘ve been able to unify our grid system across all of our web properties. Designers are now able to quickly spin up new mock-ups with artboards pre-configured to our spec. And developers can implement those designs quickly and consistently, with the confidence that their code will be aligned with the original intent.

We‘ve also seen significant performance benefits by progressively transitioning our codebases from legacy Flexbox implementations to pure CSS Grid. On average, pages utilizing a pure CSS Grid layout render 20% faster and require 30% less CSS code than their Flexbox equivalents.

But perhaps most significantly, CSS Gridish has shifted our entire mindset around layout and componentry. We‘re no longer thinking in terms of isolated "boxes" that fill the width of their container, but in terms of a cohesive, two-dimensional system. This has led to a reduction in one-off components and overrides, and a more consistent and purposeful design language across our ecosystem.

Getting Started with CSS Gridish

If you‘re ready to start utilizing CSS Gridish in your projects, head over to the GitHub repo where you‘ll find everything you need to get started.

For designers, start by downloading the Sketch template file and using it as the basis for your mock-ups. For developers, install the CSS Gridish package from npm and use the CLI tool to generate your CSS from your central config.

If you run into any issues or have suggestions for improvements, please don‘t hesitate to file an issue or submit a pull request on GitHub. CSS Gridish is an open source project, and we welcome contributions from the community.

Towards a Brighter Future of Web Layout

CSS Grid is a transformative technology for web layout, and tools like CSS Gridish help us realize its potential by bridging the gap between design and development.

By establishing a common grid system as the foundation of our designs and codebases, we can build more purposeful, resilient, and flexible layouts and components. Ones that don‘t just adapt to the dimensions of their containers, but are thoughtfully designed in concert with the overall proportions and rhythm of our pages.

As Jen Simmons, Designer Advocate at Mozilla and pioneer of CSS Grid, put it:

"Graphic design is about so much more than columns of text and boxes of content. We now have the ability to create real art direction on the web. Establishing key lines, proportions, and relationships between all the elements on a page is fundamental to good design. With CSS Grid and tools like CSS Gridish, we finally have the ability to implement that level of intention and nuance in our web layouts."

At IBM, CSS Gridish has been a catalyst for a profound shift in how we approach web layout and design. By thinking in terms of the grid, we‘re creating a more harmonious and effective user experience across our entire ecosystem of properties and products.

But we‘re just scratching the surface of what‘s possible. As CSS Grid continues to mature and achieve near-universal adoption, the web design and development community has an opportunity to re-envision what a website can and should be. Not just a collection of isolated components and pages, but a cohesive, purposefully designed system.

CSS Gridish is our contribution to this exciting new era of web layout. We hope it empowers you and your team to not just adopt CSS Grid, but to leverage its potential in creating more effective, engaging, and beautiful web experiences.

So go forth and build great things with CSS Gridish! The future of web layout is looking bright indeed.