Skip to main content

Grids

Version: 0.9.0
Edit

Autofill grid that creates 1-, 2-, 3-, or 4-column grids depending on the amount of available space.

Grid

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/grids.scss#L10

Grid item
Grid item
Grid item
<!-- grid -->
<div class="o-grid">
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
</div>

Two-up Grid

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/grids.scss#L201

Grid item
Grid item
Grid item
Grid item
Grid item
<!-- two-up grid -->
<div class="o-grid o-grid--two-up">
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
</div>

Fixed Grid

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/grids.scss#L225

Grid item
Grid item
Grid item
Grid item
Grid item
<!-- fixed grid -->
<div class="o-grid o-grid--fixed">
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
</div>

Fixed Two-Up Grid

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/grids.scss#L269

Grid item
Grid item
Grid item
Grid item
Grid item
<!-- fixed two-up grid -->
<div class="o-grid o-grid--fixed o-grid--two-up">
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
  <div class="o-grid__item">Grid item</div>
</div>