2017 Update: This grid system was created almost 5 years ago now, and should be considered deprecated as these days browsers let you do much more with grids using things like Flexbox. Unless you’re looking for something really basic, you’ll probably be better off using Flexbox to achieve what you need instead. An excellent guide to getting started with Flexbox can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A simple responsive CSS grid. View the demo →
When I design web layouts, my thought process usually goes something like this:
Alright, in this section, I want a bit that’s one third of the section’s width, and then next to that I want another bit that’s two thirds of the sections’s width. Now, in the next section…
I don’t think in 12 or 16 column grids. Instead, my mental model basically just consists of the page being divided up into multiple full-width vertical sections, and each vertical section being divided up into simple fractions of the section width.
Most frameworks I’ve used don’t match that thought process at all. I usually have to:
- Remember how many columns are in the grid for the particular framework I’m using.
- Decide how I want to divide up this particular section’s content.
- Mentally do the conversion from what I want to see (one quarter + three quarters, for example) into the number of columns I need for the grid I’m using.
- Remember the class naming structure for the framework I’m using. Is it
.span3,.grid_3,.col-3, or something else altogether? - Deal with other hassles like clearing floats, messing with column padding to have the gutters look right, indicating which elements are the first in a row, and so forth.
Only the second step should be necessary.
I couldn’t find a framework that matched this mental model of how I work, so I started hacking on Gridism with the following goals:
- Class names should be memorable and self-evident.
- Gutters and basic content padding should be taken care of.
- Clearing floats should be done automatically.
- Wrapped grid sections should be independant of vertical page sections.
- Frequently required utility classes should be provided.
- Common patterns for Responsive Design™ should be built-in.
I hope you find that this project is living up to those goals. If not, please create an issue and let me know.
The easiest way to use Gridism in your project is via the Bower package manager.
bower install gridismElsewise, download the zip folder, extract it, and copy gridism.css into your project’s folder. Boom. Done.
Add the following stylesheet to your HTML’s <head> section:
<link rel="stylesheet" href="bower_components/gridism/gridism.css">Note: If you didn’t install using Bower, you need to adjust the path of CSS file to match your file structure.
Add the following meta tag to your HTML’s <head> section:
<meta name="viewport" content="width=device-width,initial-scale=1">Without this meta tag, mobiles and tablets might load your page as a scaled-down version of the desktop size, instead of resizing the content to match the device’s actual viewport width.
I’d ❤️ to receive contributions to this project. It doesn’t matter if it’s just a typo, or if you’re proposing an overhaul of the entire project—I’ll gladly take a look at your changes. Fork at will! 😀.
Go nuts. See LICENSE (MIT).