10 CSS grids for streamlined web design

One of the greatest things about being a web developer today has got to be the abundant amount of resources available to help you code better, faster, and easier than ever before. CSS frameworks, commonly referred to as the building blocks of web development, are one of those such resources.

As you aim to reduce the time spent establishing a base to lay your website down upon, CSS frameworks are an excellent place to start. Sometimes, however, you just want something a little more lightweight and flexible. That’s why CSS grids are the second-best place to start.

A CSS grid is exactly what the name implies: a tool that creates a grid system (with horizontal, vertical, and sometimes curved lines) for your web design. It’s this basic grid structure which enables developers to:

  • Speed up development.
  • Have more control, even as you tackle more advanced designs and layouts.
  • Design more effectively for all devices and platforms (in other words, design responsively).
  • Create a more consistent and balanced design.
  • Focus on creating a beautiful design as you use a pre-made grid to offload minor setup to.

In other words, if you want more time to be creative while developing your website, a CSS grid is a great resource to streamline the frontend.

CSS grids can be found in a variety of forms. Many frameworks already come built-in with CSS grids, making it one less thing you have to worry about (in addition to everything else the framework does for you). There are also some lightweight and handy CSS grids, also referred to as “simple frameworks”. While they may not provide you with anything aside from a web design grid, they do provide more options and flexibility in terms of grid size and distribution.

Here are 10 of the best CSS grids available in 2017:

1. Bootstrap

We weren’t really surprised to see that this already fully-loaded framework has a much-loved grid system. Not only that, but Bootstrap’s grid is fluid, which means you have more control over its 12 columns and how they will appear, wrap, and stack within your design. So, if you’re already using Bootstrap to streamline your HTML, CSS, and JavaScript coding work, then you’ll want to take advantage of its grid system too.

2. Flexbox Grid

If you’re in need of an intermediate grid system, so to speak, Flexbox Grid is a good one to check out. It’s somewhere between the basic grid system that includes a set number of columns and sizes to work with and the more comprehensive solution a la Bootstrap. What sets this one apart is its more complex options, like offsetting, auto-sizing, nesting, and ordering.

3. Foundation

Foundation appears to be a fairly simple grid system at first glance. But take a further look into Zurb’s introduction to Foundation and you’ll find that there’s a lot more flexibility and functionality you can get out of this one, especially if you make use of its JavaScript components.

4. Griddle

For developers in search of a simple grid system solution, give Griddle a go. This CSS grid system was built to support all major browser types (e.g. Chrome, Firefox, Safari), can cater to mobile-first design, and is pretty basic in its approach—making it a universally user-friendly grid system to work with.

5. Gridlock/Formstone

A few years ago, the Gridlock CSS grid system was a big hit, so don’t be surprised if you still hear developers tossing the name “Gridlock” around. These days, the development company behind Gridlock has rolled this responsive grid into its Formstone library, so you can find it there.

6. Materialize CSS

Let’s face it, if Google’s telling us that there is a right way to do something, it’s time to listen. Materialize CSS is a grid system built to complement Google’s Material Design standards. So for those of you who are a fan of designing in the same fashion as Google, then you’ll want this grid to kick it all off.

7. Responsive Grid System

Responsive Grid System is a simple and totally lovable CSS grid system. Why? Because it puts content first: “Instead of fitting your content to your grid, you can make your grid suit your content.” This isn’t something you typically find in CSS grids, so it’s definitely something that will make many developers appreciate this one.

8. Simple Grid

If simple is your thing, don’t miss Simple Grid’s CSS grid system. It’s lightweight and very easy to use; thus, its “simple” moniker.

9. Skeleton

While Skeleton is not a CSS framework, it does offer a few more features than your basic CSS grid. In addition to the 12-column fluid grid, Skeleton also includes typography, buttons, forms, lists, tables, and more. This is the perfect grid system if you’re looking for a solid starting point, but want more flexibility in building up the rest of your site around it.

10. Susy

Have you met Susy yet? If not, it’s time you’ve been introduced to this layout engine. Unlike many of the grid systems mentioned above, Susy is all about providing developers with the tools to create a custom grid. You don’t need to commit to the pre-defined columns, sizes, and settings of other grids; Susy was built to accommodate asymmetric grids and other more customized layouts.

Brenda Barron is a writer from southern California specializing in business and technology. Read more about what she’s up to on her site Digital Inkwell. More articles by Brenda Stokes Barron
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress