<div class="row g example">
    <div class="g-column g-one-quarter"></div>
    <div class="g-column g-three-quarters"></div>
</div>
<div class="row g example">
	<div class="g-column g-one-quarter"></div>
	<div class="g-column g-three-quarters"></div>
</div>
/* No context defined for this component. */
  • Content:
    .g-one-quarter {
    	width: 25% - $grid-gutter;
    }
    
    .g-three-quarters {
    	width: 50% - $grid-gutter;
    }
    
    .g-three-quarters {
    	width: 75% - $grid-gutter;
    }
  • URL: /components/raw/quarter-column-layout/_quarter-column-layout.scss
  • Filesystem Path: src/patterns/patterns/grid-layouts/05-quarter-column-layout/_quarter-column-layout.scss
  • Size: 148 Bytes
  • Handle: @quarter-column-layout
  • Preview:
  • Filesystem Path: src/patterns/patterns/grid-layouts/05-quarter-column-layout/quarter-column-layout.hbs

Quarter Column Layout

Quarter column grid.