How to use the simple responsive CSS grid – SimpleGrid

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

Download latest release 

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

12

Containers can span anywhere from 1 to 12 columns.

  • .span1
  • .span2
  • .span3
  • .span12

Wrap each row with the .row class

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1

Offsets

Use .shift to offset column

ie. .shift2

span 10 columns and shift 2

span 10 columns and shift 2
span 5 columns and shift 3

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

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

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1

Rigid Grid

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1

Enjoy

Leave a Reply

Your email address will not be published. Required fields are marked *