Span

A multi-purpose component for setting width, max-width and flex basis based on a column set.

span_auto

...
...
...
<div class="grid">
  <div class="grid__item span_auto">...</div>
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
</div>

span_full

...
...
...
<div class="grid">
  <div class="grid__item span_full">...</div>
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
</div>

span_[col]

...
...
...
...
...
<div class="grid">
  <div class="grid__item span_6">...</div>
  <div class="grid__item span_6">...</div>
  <div class="grid__break"></div>
  <div class="grid__item span_6">...</div>
  <div class="grid__item span_3">...</div>
  <div class="grid__item span_3">...</div>
</div>

span_[col]_[breakpoint]

...
...
...
...
<div class="grid">
  <div class="grid__item span_12 span_6_xs span_8_sm span_4_md span_3_lg">...</div>
  <div class="grid__item span_12 span_6_xs span_4_sm span_4_md span_3_lg">...</div>
  <div class="grid__item span_12 span_6_xs span_4_sm span_4_md span_3_lg">...</div>
  <div class="grid__item span_12 span_6_xs span_8_sm span_12_md span_3_lg">...</div>
</div>