Replace Bootstrap Layouts with CSS Grid

In March, Mozilla released Firefox 52, which added support for CSS Grid Layout. If you aren’t familiar with CSS Grid, it is a two-dimensional layout system for the web that allows us to create layout patterns natively in the browser. This means we can easily recreate familiar grids using just a few lines of CSS. It also means we can do a whole lot with CSS and layouts that wasn’t possible before… but more on that in a bit.

A quick note: This post isn’t meant to be a comprehensive primer for CSS Grid, and assumes a basic familiarity with CSS Grid. If you haven’t already, I’d recommend checking out the fantastic CSS Grid Layout page on MDN.

Layouts on the web have always been tricky. When the web was first introduced, there was no method for layouts. Then came tables (in tables, in tables, in tables). It was hackish and weird, but it worked. When CSS was introduced in the late 90s, developers were able to start using divs and floats for their designs and layouts. This eventually led to frameworks and grid systems that helped make sense of all of the “gotchas” like clearing floats, negative margins, responsive design and more. And that’s how things have been for years now. There are thousands of grid systems, but they are all, more or less, the same.

Now that CSS Grid Layout is a reality, I wanted to see what it would take to replace an existing grid framework with CSS Grid. For this experiment, I chose the popular Bootstrap framework.

I started by creating a basic site using the Bootstrap grid:

View it on CodePen.

So let’s break this down and convert it to use CSS Grid.

In Bootstrap, the .container class wraps everything and sets the width constraints. It also adds a padding to the left and right edges and centers everything. There isn’t much to change here. Just like with Bootstrap, the container class can be handy to use with CSS Grid. I recreated it like so:

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

We can also add responsive breakpoints by adding the following:

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

Bootstrap uses the .row class to wrap columns and provide a negative margin on the left and right to negate the padding added by individual columns. Hacks like negative margins are no longer needed with CSS Grid, but if you’ve read the documentation, you’ll know that CSS Grid requires a grid container. The .row class is the perfect place to do this. Let me show you what I did, and then we’ll break it down.

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
}

display: grid creates the grid container.

The grid-template-columns property defines the columns for the grid. You can use spaces to define each column individually, but here we utilize the repeat notation to define 12 equal-sized columns. 1fr refers to the width of the individual column. MDN defines the fr unit as a new unit which “represents a fraction of the available space in the grid container.” You can read more about fr units on MDN. You can also read more about the grid-template-columns property.

Finally, the grid-gap property is a shorthand property that defines both the amount of space between the columns and between rows of columns. Think of it as our gutter. You can read more about grid-gap here.

Now, all that’s left are the column classes. Bootstrap uses column classes such as .col-md-6 or .col-lg-8 to determine the number of columns a div should span. It also floats the div and adds padding to the left and right to create gutters between the columns. Recreating these classes is incredibly easy thanks to the .grid-column shorthand property. For example, if we wanted to recreate the .col-md-6 class, we can use the following:

@media (min-width: 992px) {
    .col-md-6 {
        grid-column: span 6;
    }
}

Simple, right? No floats. No padding. It just works. The grid-column shorthand specifies an item’s size and location. We can use span to indicate that this particular item should span six columns. The gutter is automatically taken care of because of the wrapper’s grid-gap property. You can learn more about the grid-column property here.

So what happens when you put it all together? Well, the website looks exactly the same, but we are able to completely remove the Bootstrap dependency and use native CSS Grids.

Check out the updated website on CodePen.

This type of experiment is a fun learning exercise, but it can also be dangerous. To borrow a line from wise philosopher Jeff Goldblum:

“You … were so preoccupied with whether or not you could, you didn’t stop to think if you should.”

We don’t want to limit CSS Grid by shoehorning it into a syntax that will limit its potential. We were able to easily recreate the Bootstrap grid, but CSS Grid is so much more powerful than any grid system that came before it. That’s because it is a web-native solution built from the ground up.

We are no longer locked into 12 column grids that float from left to right. Do you want to place elements in precise locations on the grid, independent of their HTML source order? Go for it. Do you want to create items that span multiple columns and rows? Not a problem. Check out this demo that Mozilla’s Craig Cook created to showcase various layout patterns. Try recreating some of those layouts using Bootstrap (hint: not possible). We are just scratching the surface of what CSS Grids can do.

If you want to learn more about CSS Grid, check out the following resources:

Mozilla CSS Grid Demo
CSS Grid documentation on MDN

About Dan Brown

Creator, developer, strategist, homebrewer, runner, sock enthusiast, beard evangelist, writer, drummer, adventurer, Oxford comma advocate, and human Swiss Army Knife.

More articles by Dan Brown…


8 comments

  1. Markus

    Small typo grid-cap vs grid-gap

    April 13th, 2017 at 10:38

    Reply

    1. Havi Hoffman [Editor]

      Fixed. Markus, thanks for spotting.

      April 13th, 2017 at 13:14

      Reply

  2. voracity

    First, could I again quickly draw attention to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1344525 . It’s a very serious issue with images (and other replaced content) in Grid layout that also appears to affect Chrome, it can only be hackishly fixed with JavaScript, and it runs the risk of becoming the locked in behaviour if it’s not fixed soon.

    With that out of the way, CSS grid is fantastic and by far and away the easiest web layout approach that I’ve used. At first I thought the syntax might be a bit verbose, but I’m finding it’s actually very efficient — common things are quick, and uncommon things are more logical than I expected.

    Things like Bootstrap are (were) useful but can produce highly unsemantic markup/class names. (That’s understandable, because Bootstrap can’t extend CSS itself.) Now that we have grid, we can avoid presentational class names almost completely, and just use semantic class names.

    April 13th, 2017 at 20:45

    Reply

    1. Dan Brown

      I had a similar experience. It felt verbose at first, but in less than an hour I had the basics down and it started to feel quite intuitive. The future is bright.

      April 17th, 2017 at 14:59

      Reply

  3. Mike

    Another ‘grid-cap’ typo: “Finally, the grid-cap property”

    April 14th, 2017 at 00:31

    Reply

    1. Havi Hoffman [Editor]

      Dang! Fixed it now. Thank you. :-)

      April 14th, 2017 at 09:22

      Reply

  4. Tomer Cohen

    Grids are awesome but not backward compatible. In order to make full use of grids, there is a need for client side shim or a preprocessing converter on the server. Because of this, we could not enjoy these features right away unless our Target audience are the bleeding edge.

    April 16th, 2017 at 00:03

    Reply

    1. Dan Brown

      Sounds like a good community project :) You could make use of the @supports rule if you wanted to use grids in production: https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

      April 17th, 2017 at 14:55

      Reply

Post Your Comment