Row

Usage #

To build a row, you need to specify two classes: row and row-{size}. The {size} in row is based on the Spacing scale. So using any spacing value you can set the gap between elements.

<div class="row row-6">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

If items exceed the width of the row container, they are moved to a new line.

<div class="row row-4">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

The row module works with different elements. For example with text elements by separating them with a distance.

<div class="row row-4 flex-baseline">
    <span class="label">Label</span>
    <span>Text</span>
    <span class="caption caption-positive caption-caps">Caption</span>
</div>

Note: Use the flex-baseline modifiers to align text items to the baseline of the row.

Overflow #

Using the flex-overflow modifier you can make the elements overflow the row so that they can be scrolled horizontally in it.

<div class="row row-6 flex-overflow">
    <div class="card">...</div>
    <div class="card">...</div>
    ...
</div>