Row component of flexbox based grid system

html

<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--reverse">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--nowrap">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--left">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="c-row c-row--right">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="c-row c-row--center">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="c-row c-row--between">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="c-row c-row--around">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="c-row c-row--top">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--bottom">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--middle">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--baseline">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--collapse">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--margin-s">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--margin-l">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--fill">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--auto">
    1
  </div>
  <div class="c-row__col c-row__col--auto">
    22
  </div>
  <div class="c-row__col c-row__col--auto">
    333
  </div>
</div>

<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--justify">
    1
  </div>
  <div class="c-row__col c-row__col--justify">
    22
  </div>
  <div class="c-row__col c-row__col--justify">
    333
  </div>
</div>

<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--fit">
    1
  </div>
  <div class="c-row__col c-row__col--fit">
    22
  </div>
  <div class="c-row__col c-row__col--fit">
    333
  </div>
</div>