Introducing an easy-to-use and lightweight css grid.
- Flexible 12 column grid
- Easily extend for custom styling
- Fluid (works no matter the size of the containing div)
- Responsive (looks nice on mobile & web)
- Option to maintain grid column layout on mobile screens
Big thanks to those who have gone before us. There are many great css frameworks available. Some of the more popular are Twitter Bootstrap, Skeleton and 960 Grid System. I’ve tested all of these and found them to be easy to work with and pretty flexible. If you are interested you can find a handy list of the major css frameworks here.
The trend of late is to make css frameworks as ready-to-go themes with the option of removing/editing styles to customize it to your taste. Which is really helpful if you are a developer wanting to throw a prototype together. However, sometimes all a project needs to get started is a few lines of code, such as the base grid (without any styling). And that’s what SimpleGrid aims to provide. A simple grid framework.
View SimpleGrid project page on GitHub
The Grid
The grid is the standard 12 column grid. And it’s fluid, which means it will fit any layout. If you want a specific sized grid – such as a 960px grid – simply create a containing div with a width of 960px and drop the grid inside it. It’s that easy.
Here’s an example grid with a container spanning 12 columns
12
Containers can span anywhere from 1 to 12 columns.
- .span1
- .span2
- .span3
- …
- .span12
Wrap each row with the .row class
Offsets
Use .shift to offset column
ie. .shift2
span 10 columns and shift 2
span 5 columns and shift 3
Positioning columns
You can shift a grid to the right using the class .shift-right
span 5 columns and shift to the right
That’s all there is to use a nice mobile friendly grid
Shrink this page to see how the following grids work on mobile.
Regular Grid
Rigid Grid
Enjoy
