Basscss / Docs

Layout

Layout modules are more complex than utilities and are tied to markup structure. They are designed to be highly reusable and to inter-operate with other styles.

Grid

The utility-based grid allows a lot of flexibility in creating complex layouts. Start by using a .clearfix container. Optionally use a .container to set a max-width.

Add columns using the .col and grid width .col-N classes.

Use breakpoint-prefixed column utilities to change the grid at different screen widths.

Use padding and negative margin utilities to create gutters based on the white space scale.

Table Object

Use the table object to vertically center content. These styles can be combined with grid width and white-space utilities for a wide range of layout options.

Grid Table Object