James Y Rauhut

Flawlessly Upgrade Your App Over Time with Grid Wiz

Make a CSS grid framework with custom browser support at the snap of a function.

Grid frameworks are essential for experiences that span many codebases to keep the layouts aligned. The grid keeps columns at specific dimensions as the user goes to different pages within the experience.

Problem

While at IBM, I introduced CSS Gridish. It had a simple premise: Give a config file of your grid design and get both CSS Flexbox and CSS Grid back. There were two fundamental decisions in CSS Gridish that troubled me: the use of vw units and Node Sass. vw units created more bugs and poor development experiences than it solved. Node Sass is powerful and used by a lot of IBM, but restricted the environment flexibility of the package.

Solution

Grid Wiz is an open-source package and visual editor that scaled back the scope to just the flexible developer experience. If I could get the core needs satisfied, other tools could be built on top of Grid Wiz to satisfy more desires. Here are the benefits of Grid Wiz:

Flexible Browser Support

You can specify the exact CSS technology you want to use to decide how much browser support is included from CSS Flexbox, Variables, all the way to CSS Grid.

Nesting Grids

HTML isn’t written one layer deep. A great grid framework should allow you to embed divs within divs, but still remember how many columns are available. Grid Wiz allows you to use subgrids before CSS Subgrid technology is released. As the technology is rolled out onto browsers, this tool will provide non-existent switching costs.

Environment Flexibility

There are three different ways to use Grid Wiz based on your needs:

  • Edit your grid directly in the visual editor and then copy the CSS directly into your codebase.

  • Distribute your grid to multiple projects with a Node package.

  • Compile the grid directly in your app’s build process.