Grid.css – A Minimal Grid System for Web Developers

By Jake Rocheleau. in Toolkit. Updated on August 12, 2022.

Larger frontend frameworks like Bootstrap come with their own grid setups. But, they also come with a lot of baggage in the form of pre-designed page elements and JavaScript components.

If you’re looking for a much smaller and streamlined grid system then you’ll love Grid.css.

This free open source library comes packaged with the traditional 12-col grid system that you can structure for any layout. The CSS is really easy to use, and the file itself only measures 560 bytes (that’s half a KB!)

Getting started is super easy and you just need one CSS file added to your header.

You can find the direct download link on the Grid.css homepage or in the official GitHub repo. You could even use the raw CDN version to embed this file directly from GitHub without hosting it yourself.

Now, you can set up your column structure using any elements you want (divs, sections, etc).

This generally includes a .row element (the container) along with many internal column elements. The column classes use numbers to define their total space inside the container, so for example, .col4 takes up four columns of the twelve total.

Here’s an example snippet from the demo:

<div class="row">
  <div class="col4"></div>
  <div class="col4"></div>
  <div class="col4"></div>
</div>

You can use any combination of column classes you like, just so long as they add up to 12.

This means you can also restructure the page however you want, by using different row containers. For instance, you could have one large span for your header but use two different row/col setups for your page body.

Naturally, this library is 100% free and open-source, so you’re free to make edits however you like.

The creator, Ahmed Tarek, also made Butns which is a variant of the many button UI kits out there. It pairs nicely with Grid.css, so they’re both excellent libraries to pick up when starting a new web project.