Grid

A flexbox based grid system.

.grid + .grid__item

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

.grid__item_fill

The fill modifier class creates equal height columns for a grid.

Duis nec augue nec massa feugiat bibendum eu et nisl. Vivamus accumsan consequat justo, sed faucibus lorem sodales vitae. Integer et consectetur tellus. Aliquam pellentesque est id sapien tristique, eget lobortis enim luctus.
...
...
<div class="grid">
  <div class="grid__item">
    ...<br /><br /><br /><br />
  </div>
  <div class="grid__item grid__item_fill">...</div>
  <div class="grid__item">...</div>
</div>

.grid__break

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

.grid_[breakpoint]

...
...
...
...
...
...
...
<div class="grid grid_md">
  <div class="grid__item">...</div>
  ...
</div>
<div class="grid grid_sm">
  <div class="grid__item">...</div>
  ...
</div>

.grid_size_[type]

...
...
...
...
...
...
...
...
...
...
...
...
<div class="grid grid_size_xs">...</div>
<div class="grid grid_size_sm">...</div>
<div class="grid grid_size_lg">...</div>
<div class="grid grid_size_xl">...</div>

.grid_flush

...
...
...
...
...
...
...
<div class="grid grid_flush">...</div>