.c-row
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
2
3
3
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
2
3
3
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
2
3
3
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
2
3
3
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
2
3
3
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>