Why use Gutter Grid?

The problem

CSS Grid is now implemented in all modern browsers. All of our layout dreams have come true! ... Well almost all of them.

Unfortunately IE11 still holds a fairly significant market share and it doesn't support the modern implementation of CSS Grid. It can be difficult to get people on board with the idea of allowing IE to look different to modern browsers. That is especially the case if the site you are building is an intranet with a 90% IE user base.

Autoprefixer is able to help out a lot in terms of getting IE11's version of CSS Grid to behave almost like modern browsers do. Unfortunately we are still stuck with IE11 not supporting CSS Grid auto-placement. That is a major pain point for this industry and Gutter Grid sets out to fix that.

The solution

Gutter Grid is a flexbox based grid system for building fully responsive grid layouts with highly customisable gutters. These gutters are highly reminiscent of the CSS grid-gap property. So reminiscent in fact that that Gutter Grid gutters will line up perfectly with real CSS Grid gaps! Since this grid system is powered by flexbox and not CSS Grid, it works perfectly in IE11. Through Gutter Grid, IE11 has access to simple auto-placement grids with gaps (albeit with a different syntax). It even comes with a default set of media queries that may save you from having to write out some custom styles for mobile devices.

Even though Gutter Grid is powered by flexbox, it features a legacy mode that, when enabled, adds display:table, float:left and display:inline-block backups that legacy browsers can fall back on. This will help prevent your site from blowing up even when viewed in those decrepit old IE8 and 9 browsers!

Here is an example. Have you ever had to do a layout that looked something like this in a design?

Looks simple enough right? Just three columns and some margin around each cell. How hard can that be?

Well you would be surprised. The problem comes from the edges of each cell needing to be hard up against the edges of its container.

With Gutter Grid installed, this is all the code you need to write to generate the layout styles for that grid:

.grid__wrapper { padding-bottom: 0.1px; }
.grid {
  // Display a 3 column grid with a 20px gutter
  @include grid(3, 20px);
}

If you wanted more control over the grids breakpoints, the above grid would be the equivalent of writing this:

.grid__wrapper { padding-bottom: 0.1px; }
.grid {
  // Display a 3 column grid with a 20px gutter by default
  @include grid(3, 20px, (
    2: 960px, // #1
    1: 600px // #2
  ));
  // #1) display 2 columns on a 960px wide screen and below
  // #2) display 1 column on a 600px wide screen and below
}

Try the challenge for yourself

See how much work it takes to make a grid that follows these rules without using Gutter Grid:

• Make a 3x3 grid
• 20px gutter inbetween each cell
• No CSS grid allowed (needs to work in IE in a way that supports auto-placement)
• The cells must sit hard up against the edges of the parent element at all times
• On a 960px wide screen, the cell width changes to 50% width per cell with 2 cells per row except for the last one
• On a 600px wide screen, the cell width changes to 100% width per cell
• The cells should all be the exact same width at all times
• It needs to not break in IE 8 and 9