Grid.css – A Minimal Grid System for Web Developers

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

If you’re looking for a most smaller and streamlined grid complement afterwards you’ll adore Grid.css.

This giveaway open source library comes finished with a normal 12-col grid system that we can structure for any layout. The CSS is unequivocally easy to use and a record itself only measures 560 bytes (that’s half a KB!)

Getting started is super easy and we only need one CSS file combined to your header.

You can find a direct download link on a Grid.css homepage or in a central GitHub repo. You could even use a raw CDN version to hide this record directly from GitHub though hosting it yourself.

Now, we can set adult your mainstay structure using any elements we want (divs, sections, etc).

This generally includes a .row component (the container) along with many internal mainstay elements. The mainstay classes use numbers to conclude their sum space inside a container, so for example, .col4 takes adult 4 columns of a twelve total.

Here’s an example snippet from a demo:

div class="row"
  div class="col4"/div
  div class="col4"/div
  div class="col4"/div

You can use any multiple of mainstay classes we like, only so prolonged as they add adult to 12.

This means we can also restructure a page however we want, by regulating different quarrel containers. For instance, we could have one vast camber for your header though use dual opposite row/col setups for your page body.

Grid.css layoutGrid.css layout

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

The creator, Ahmed Tarek, also done Butns that is a various of a many symbol UI kits out there. It pairs easily with Grid.css, so they’re both glorious libraries to collect adult when starting a new web project.

Add Comment