2.1.2 #permalink Additional grid styles

Toggle example guides Toggle HTML markup

grid-spacer adds a small padding to provide separation between grid elements.

grid-padder limits the width of a grid element to 80em (1280px in most browsers) so that the element won't be full-width at wide resolutions. grid-lg-padder is the same, but has a limit of 64em (1024px at base zoom) However it's not possible to display this behavior in the styleguide as these examples are forced into a 754px box...

Example
 
 
 
 

 

 
Markup
 <div class="grid-12 grid-parent">
  <div class="grid-12 grid-md-6 grid-lg-3 grid-spacer col_ggPrimary1"><div class="col_ggPrimary2">&nbsp;</div></div>
  <div class="grid-12 grid-md-6 grid-lg-3 grid-spacer col_ggPrimary1"><div class="col_ggPrimary2">&nbsp;</div></div>
  <div class="grid-12 grid-md-6 grid-lg-3 grid-spacer col_ggPrimary1"><div class="col_ggPrimary2">&nbsp;</div></div>
  <div class="grid-12 grid-md-6 grid-lg-3 grid-spacer col_ggPrimary1"><div class="col_ggPrimary2">&nbsp;</div></div>
 </div>
 <br/>
 <div class="grid-12 grid-parent col_ggPrimary1">
  <div class="grid-12 grid-padder col_ggPrimary2">&nbsp;</div>
 </div>
 <br/>
 <div class="grid-12 grid-parent col_ggPrimary1">
  <div class="grid-12 grid-lg-padder col_ggPrimary2">&nbsp;</div>
 </div>
Source: layout/grid_gg.less, line 189