Fully responsive grid system

Bass is my front end framework that is the foundation of most of the sites I create.


The grid is based on paddings and margins. Each column has padding parameters that determine the gutter width (fully customisable). These should be set to 50% of the required gutter width/height between columns as the paddings do not collapse against each other. So if 2 columns each had a padding of 1em the total gutter width would be 2em.

The row is then given a negative margin of the same value as the gutter to ensure that the row starts at the expected ‘0’ position and does not have extra spacing on any side of it as a result of the gutter. The position of the row is in no way affected by the gutter of the contained columns.


By default this grid is designed to be developed using a mobile first methodology. This means that with NO media queries or breakpoints declared the default styles are for the smallest device size. Following this the next largest breakpoint (panda) is applied on top and then hippo for the largest devices.

Pin It on Pinterest