# Just a simple grid Based on existing grid systems, such as [Twitter Bootstrap Grid System](http://getbootstrap.com/css/#grid) and [csswizardry-grids](http://csswizardry.com/csswizardry-grids/), this is a fluid, flexible and responsive grid that can be scaled up to an arbitrary size, within the `$max-width` of your main `.container`. You also can easily and infinitly nest columns and rows, so you can build out complicated layouts without creating a lot of new custom elements. This is a grid system generated by Sass and it is based on [BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). ## Setup The only thing you need to do to start building your grid is to adjust the number of `$grid-columns`, the desired `$gutter` and the main container `$max-width`. ## How it works Grid systems, as you may know, are used for creating page layouts through a series of rows and columns that will host your content: * Your `.row` element(s) must be placed within a `.container`, with a fixed `$max-width` for proper alignment. This elements will split up your page horizontally and will contain groups of `.col`. * Your content should be placed within the `.col` blocks, and only `.col` may be immediate children of `.row`. * You can nest `.row` and `.col` how many times you need, since you follow the previous standard. * Your `.col` width is defined by specifying the number of a single grid columns, in your total `$grid-columns`. For example, a `.col--*-4` will represent a width of 4 columns in your `$grid-columns` total. * To control your responsive grid, there are available three class prefixes: `.col--sm-*` for small devices, `.col-md-*` for medium devices and `.col--lg-*` for large devices. All together, in your `.col` element, it will make your grid respond to each one of your default media queries. * Finaly, you have the option to move columns to the right using `.col--*-offset-*` classes. These classes increase the left margin of a column by the number of columns you want. For example, `.col--*-offset-4` will push `.col-*-4` over four columns. ## Markup ### Basic usage Simple column set - `
` - inside a `.row`. ```html

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Col 7

Col 8

``` ### Offsetting columns Increase the left margin of a column by the number of columns you want, along with the responsive class prefixes, if you need. ```html

Col 9 with offset 0

Col 10 with offset 4

Col 11 with offset 3

Col 12 with offset 6

Col 13 with offset 3

``` ### Nesting columns To nest your content, add a new `.row` inside a `.col`, and set of `.col-ld-*` columns within an existing `.col-ld-*` column. Nested rows should include a set of columns that add up to 12 or less. ```html

Col 14

Nested col 14.1

Nested col 14.2

``` ### Gutterless columns To remove all the gutters from your columns just add the class `.row--gutterless` to your `.row` element. ```html

Col 15

Col 16

``` ## Demo Check out the demo and play around on [Code Pen](http://codepen.io/pedroreis/pen/ituho) and/or check the compiled CSS on [SassMeister](http://sassmeister.com/gist/c6368fc9a239e1798fcd).