Not every project needs a complex 12-column layout. Sometimes a simple four-column grid is all you need - and that's exactly what Four Grid delivers.
It's a lightweight, responsive CSS grid system that scales to any screen size, with a single breakpoint at 480px.
Setup is fast, using only two classes - row and col - so you can build clean, flexible layouts in minutes
The Basic 4 Column Grid
column full
column half
column half
column one-third
column one-third
column one-third
column one-fourth
column one-fourth
column one-fourth
column one-fourth
Mix and match columns for different layouts. There are other column classes for this,.half, .one-third, .two-thirds and .three-fourths which covers most popular layouts.
column one-third
column two-thirds
column two-thirds
column one-third
column three-fourths
column one-fourth
column one-fourth
column three-fourths
column one-fourth
column half
column one-fourth
Four Grid isn't a full framework or a heavy boilerplate. It's a minimal grid system I created for my own projects, designed for developers who want a straightforward, no-nonsense approach to layout structure.
There are no .last or .end classes required in the HTML, keeping your markup clean and easy to maintain. Just add your rows and columns, and the grid takes care of the rest.
The beauty of 4Grid is its reliability. It works consistently across all major browsers - including older ones like IE9+ and Firefox 4+ - as well as modern standards-based browsers such as Chrome, Opera, and Safari.
Download
