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:
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.
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.
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.
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.
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.