Working with the Gridset padding classes

The Gridset CSS provides classes to help you add padding to your elements and still keep them on grid. Here are the classes (where * is your grid’s prefix):

  • **-pad* Add left and right padding of half the gutter width on the outside of the element.
  • **-padfull* Add left and right padding of the full gutter width on the outside of the element.
  • **-padin* Add left and right padding of half the gutter width on the inside of the element.
  • **-padinfull* Add left and right padding of the full gutter width on the inside of the element.

All padding is based on the gutter width. If there is no gutter width set, these classes will not work.

The pad and padfull classes will hang into the gutter. If you want two elements to abut across a gutter, apply the pad class to both and their edges will meet in the center of the gutter.

The padin and padinfull classes add padding inside the element, keeping its edges within the column boundaries. This class adds box-sizing:border-box in the style, which will not work in Internet Explorer 7.