A simple responsive CSS grid. View the demo →
- Simple—Each
.gridelement is a horizontal row which can contain.unitelements of various widths. Width combinations are detailed below. - Responsive—Units get stacked on screens 568px or smaller. Grids in a
.wraphave maximum widths of 978px, or 1140px when there’s lots of room. - Easy—All units have even inner and outer gutters. You can turn gutters off with
.no-gutters. There are also a few other commonly needed classes for things like alignment, floating, and hiding things.
The easiest way to use Gridism in your project is via the Bower package manager.
bower install gridismElsewise, download a zip folder, extract it, and copy gridism.css into your project’s folder.
Add the following stylesheet to your HTML’s <head> section:
<link rel="stylesheet" href="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 recieve 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).