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:
.span3
, .grid_3
, .col-3
, or something else altogether?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:
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 gridism
Elsewise, 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="https://github.com/cobyism/gridism/blob/master/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 :heart: 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! :grinning:.
Go nuts. See LICENSE (MIT).