Size

A flexbox based grid system.

.size_auto

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

size_[col]

...
...
...
...
...
<div class="grid">
  <div class="grid__item size_6">...</div>
  <div class="grid__item size_6">...</div>
  <div class="grid__break"></div>
  <div class="grid__item size_6">...</div>
  <div class="grid__item size_3">...</div>
  <div class="grid__item size_3">...</div>
</div>

.size_[breakpoint]_[col]

...
...
...
...
<div class="grid">
  <div class="grid__item size_12 size_6_xs size_8_sm size_4_md size_3_lg">...</div>
  <div class="grid__item size_12 size_6_xs size_4_sm size_4_md size_3_lg">...</div>
  <div class="grid__item size_12 size_6_xs size_4_sm size_4_md size_3_lg">...</div>
  <div class="grid__item size_12 size_6_xs size_8_sm size_12_md size_3_lg">...</div>
</div>