.c-row

  • /src/css/object/component/_row.scss

Row component of flexbox based grid system

html

1
2
3
<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--reverse">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--nowrap">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
<div class="c-row c-row--left">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
1
2
<div class="c-row c-row--right">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
1
2
<div class="c-row c-row--center">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
1
2
<div class="c-row c-row--between">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
1
2
<div class="c-row c-row--around">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
1
2
2
3
3
3
<div class="c-row c-row--top">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
2
3
3
3
<div class="c-row c-row--bottom">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
2
3
3
3
<div class="c-row c-row--middle">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
2
3
3
3
<div class="c-row c-row--baseline">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--collapse">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--margin-s">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--margin-l">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
2
3
3
3
<div class="c-row c-row--fill">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
22
333
<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>
1
22
333
<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>
1
22
333
<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>