CSS Components and Styleguide

Distribution

Row Content Space Distribution

Sometimes... Sometimes audience, columns just need a little space in their row.

grid__row--$screenSize-around
grid__row--$screenSize-between

NOTE: can't be used with easy columns.

Example

This row needs a little space around it's columns: grid__row--xs-around

This row needs a little space between it's columns: grid__row--xs-between

Markup: grid/row-space-distribution.html

                    <div class="grid ">
    <p>
        This row needs a little space <strong>around</strong> it's columns:
        <strong>grid__row--xs-around</strong>
    </p>
    <div class="grid__row grid__row--xs-around">
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
    </div>

    <p>
        This row needs a little space <strong>between</strong> it's columns:
        <strong>grid__row--xs-between</strong>
    </p>
    <div class="grid__row grid__row--xs-between">
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
    </div>
</div>

Source: grid/_grid-examples.scss, line 96