Topcoat Grid

Grid system built on top of flex.

How to use

<divclass="topcoat-grid"><divclass="topcoat-grid__row"><divclass="topcoat-grid__column--1">
1 Column
</div></div><divclass="topcoat-grid__row"><divclass="topcoat-grid__column--6">
6 Columns
</div></div><divclass="topcoat-grid__row"><divclass="topcoat-grid__column--2 topcoat-grid__offset--6">
2 Columns Offset 6
</div></div></div>

There are also classes that fill the available space automatically.

<divclass="topcoat-grid"><divclass="topcoat-grid__row"><divclass="topcoat-grid__column--auto">
Auto Column
</div><divclass="topcoat-grid__column--auto">
Auto Column
</div><divclass="topcoat-grid__column--auto">
Auto Column
</div></div></div>

Inspiration

• flexbox-grid by @zeMicro
• ptb2.me/flexgrid
• codepen.io/marcolago/pen/lqGFb
• philipwalton.github.io/solved-by-flexbox/demos/grids
• davidwalsh.name/stylus-grid

Development

Make your changes in src/grid.styl and run grunt to compile css/grid.css and css/grid.min.css