Beard ships with a standard 12-column grid and provides responsive helper classes to change the layout when the viewport reaches a certain breakpoint. It also supports nested grids and non-responsive grids for increased flexibility.
Hint: To get the grid to maintain its ratios on the small breakpoint, use the
.frame--staymodifier on your
The Auto Grid
The AutoGrid is the easiest way to get started. Simply use a div with a
.frame class and place any number of
.blk elements as direct descendants. The AutoGrid will automatically figure out the width for each column and will give it a generous 30px of padding between each of them. This will create 60px wide gutter between columns.