CSS Grid Layout v CSS Frameworks

Should you be using a CSS Framework to build your grid or should you use the native CSS Grid Layout?

CSS Grid Layout are a set of CSS rules that can enable you to build out a grid in your site without the need for a framework. From MDN:

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

So, grid layout is inspired by the old-school table layout approach, while taking cues from CSS frameworks like Bootstrap and Foundation. And it's surprisingly well-supported.

The question is: Should you be using the native CSS grid or a CSS framework to lay out the content of your site?

Let's first look at the differences between grid layout and a framework and then we'll assess when you should use which one -- because, let's face it, you already know the answer of which one to use is: It depends.

CSS Frameworks v Grid Layout

Let's take a quick look at the actual difference in code to create a simple layout like this:

CSS Frameworks (e.g. Bootstrap)

Many CSS frameworks have a similar approach to their grid layouts, which is to wrap columns inside rows. If you've worked with one you probably know the structure well. Consider how you would build a grid with Bootstrap 4.1:

<header class="row">
  <div class="col-sm-12">Header</div>
</header>
<div class="row">
  <main class="col-md-8">Main</main>
  <aside class="col-md-4">Sidebar</aside>
</div>
<footer class="row">
  <div class="col-sm-12">Footer</div>
</footer>

And there is some corresponding CSS to match the styles, but structurally it just works. Here's a working demo.

One major benefit is it's responsive right out of the box (notice the use of .col-md-8 for the main content, which implies it should be full width on smaller screens.) The downside is we loaded all these supporting grid styles with Bootstrap and only used a small set of them.

CSS Grid

Now let's accomplish this same thing with raw CSS (no framework). The markup:

<div class="grid">
  <header>Header</header>
  <main>Main</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

And the CSS (structural styles only):

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 50px 150px 50px;
}

header,
footer {
  grid-column: span 3;
}

main {
  grid-column: span 2;
}

aside {
  grid-column: span 1;
}

Here's the working demo (inspired from this great Sitepoint article).

Notice here how much cleaner the markup is. The rows are implied through the markup structure -- there's no worrying about columns being within rows in the markup because the CSS rules build the layout for us with the markup that's already in place.

One caveat here is that it would take a little extra work to make this responsive like the Bootstrap example, but it's a quick media query that can easily be abstracted into a Sass mixin.

So ... which one is it?

The Best Tool for the Job

To me, the answer is clear. The CSS Grid Layout has a bit of a learning curve to understand exactly how the rules work. But once that knowledge is in place I much prefer it over a framework, because:

It's easier to not bloat CSS by bringing in an entire grid's worth of style rules when only a few are needed.
It's supported well enough (with vendor prefixes) to cover the browser support of nearly any project that I'd work on.
The structure of the markup is entirely up to me.

But, like I mentioned, the real answer is: It depends. I would use a CSS framework for my grid when:

I'm already using a framework on my site. (Although, should you be using a CSS framework in the first place?.)
I need browser support across the globe in less developed areas. (See this article on browser support.)
The content structure of the site is dynamic. In other words, if your content editors are writing HTML, it's easier to use a framework because the the grid is (likely/) already fleshed out and documented and can supported a wide array of layouts.

In all other cases, I'm going with the native CSS grid layout.

What About Flexbox?

Yeah, what about Flexbox? Isn't that kind of like a grid? Sort of. This article explains it well by summarizing:

CSS grid is a two-dimensional system (rows and columns), while flexbox works in a single direction (rows or columns).
CSS grid is about the layout, while flexbox is about the content.

Ultimately, flexbox is better suited for layouts within components on a page, while the grid is better for laying out the sections on a page. Using the example from above, the page layout is best suited by using the grid, but flexbox may be of benefit within one of the sections (header, footer, sidebar, etc.).

References

I've linked to several other articles throughout this article, but I think it's worth restating them (and adding a few) here. There is some good, focused reading on the topic if you want to go further with it.