Space Grid Inset

Grid Item

<!-- space grid inset -->
<div class="o-fixed-grid o-fixed-grid--three-up u-space-gap-inset">
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>

Back to top

Space Grid Inset Compact

Grid Item

<!-- space grid compact -->
<div class="o-fixed-grid o-fixed-grid--three-up u-space-gap-compact">
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>

Back to top

Space Grid Inset Tight

Grid Item

<!-- space grid tight -->
<div class="o-fixed-grid o-fixed-grid--three-up u-space-gap-tight">
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>

Back to top

Space Grid Inset Loose

Grid Item

<!-- space grid loose -->
<div class="o-fixed-grid o-fixed-grid--three-up u-space-gap-loose">
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>

Back to top

Space Grid Inset Expanded

Grid Item

<!-- space grid expanded -->
<div class="o-fixed-grid o-fixed-grid--three-up u-space-gap-expanded">
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>

Back to top

Space Grid Inset Spacious

Grid Item

<!-- space grid spacious -->
<div class="o-fixed-grid o-fixed-grid--three-up u-space-gap-spacious">
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>

Back to top