How We Implemented CSS Grid on Our New Site

I’m a big fan of CSS Grid. It’s a fantastic tool that makes building layouts easy and, in my opinion, allows you to write much less complicated CSS. I was the first front-end developer to start working on our site, and after seeing some of Drew’s designs my brain went to work on how to best implement them.

What immediately stuck out to me was how the layout on multiple pages fell perfectly into columns.
 

For me, this design seemed like a great use case for CSS Grid. I appreciate Grid because it makes creating your site's layout so simple. CSS Tricks' guide to Grid says it best:

I think Grid vs. Flexbox is a bit of a misnomer. They're two different tools with their own strengths. It's not about choosing one over the other, it's about using the right one for your use case. Early on in my coding career, I learned that Grid is best used for top-level layout, and Flexbox is best used to layout content within. This comparison really took hold with me and is something I have used as a general reference point ever since. Our site still makes generous use of Flexbox while using Grid for layout.

Grid is powerful in that it allows us to layout things out in two dimensions, meaning it can handle both columns and rows. Flexbox forces you to think in columns or rows. In his blog on "Why you should already be using CSS Grid", Will Soares provides a really nice comparison of markup of the same page-level layout in Grid and Flexbox.

We make use of Tailwind CSS on most of our projects. We happened to start this before Tailwind released their newest version that included grid support, which meant making our own utilities. I won't dig into creating the grid classes themselves, but I will touch on some helpers we used. First off, we established what our "default" grid should be based on all of our designs. Generally, our base layout was a 4-column grid with 70px of grid-gap.

.grid--default {
  @apply grid-columns-4 grid-gap-70;
}

In this case, the markup being generated for each of those tailwind classes is below. In grid 1fr = 1 part of the available space.

.grid-columns-4 {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
}

.grid-gap-70 {
  grid-gap: 4.375rem;
}

The other important utility we added were .grid__span classes, which we generated with a mixin and loop in our SCSS.

This generates the class .grid__span--#{START_COLUMN}-#{COLUMNS_TO_SPAN}. In our default 4-column layout (which is used on this page), we want the middle section to span across 2 columns, so we use .grid__span--2-2. Wrapping it in @responsive allows users to use it with our Tailwind defined breakpoints.

@mixin grid-span($start, $span) {
  grid-column: $start / span $span;
}

@responsive {
  @for $i from 1 through 4 {
    @for $j from 1 through 4 {
      .grid__span--#{$i}-#{$j} {
        @include grid-span($i, $j);
      }
    }
  }
}

You're looking at the final result now! For a bit more context though, below are some examples of the various way we made use of Grid throughout the site, as demonstrated by Firefox's excellent grid inspector.

If the timeline of our site's launch was just a little later we would have been able to make use of Tailwind's new release, but I'm grateful for the experience in writing a custom plugin and building those utilities 'from scratch'.

CSS Grid remains one of my personal favorite tools to use, and there are still more features and advanced uses to dig into. I personally look forward to continuing to explore its use in our future projects. Free free to reach out to us @SavasLabs on Twitter with some of your favorite uses and tips!