Horizontal
Row Content Horizontal Alignment
Sometimes columns need to lean to the left, right or live in the center of a row.
We've got you covered...
grid__row--$screenSize-leftgrid__row--$screenSize-rightgrid__row--$screenSize-center
Example
Left
Right
Center
The example below uses 3 row content horiziontal alignment classes. They have different screen sizes. I dare you to resize the screen.
Markup: grid/row-horizontal-alignment.html
<div class="grid">
<h3><strong>Left</strong></h3>
<div class="grid__row">
<div class="grid__col--xs-12">
<div class="styleguide__box">
<div class="grid__row grid__row--xs-left">
<div class="grid__col--xs-6">
<div class="styleguide__box styleguide__box--dark"></div>
</div>
</div>
</div>
</div>
</div>
<h3><strong>Right</strong></h3>
<div class="grid__row">
<div class="grid__col--xs-12">
<div class="styleguide__box">
<div class="grid__row grid__row--xs-right">
<div class="grid__col--xs-6">
<div class="styleguide__box styleguide__box--dark"></div>
</div>
</div>
</div>
</div>
</div>
<h3><strong>Center</strong></h3>
<div class="grid__row">
<div class="grid__col--xs-12">
<div class="styleguide__box">
<div class="grid__row grid__row--xs-center">
<div class="grid__col--xs-6">
<div class="styleguide__box styleguide__box--dark"></div>
</div>
</div>
</div>
</div>
</div>
<br />
<p>
The example below uses 3 row content horiziontal alignment classes.
They have different screen sizes. I dare you to resize the screen.
</h3>
<div class="grid__row">
<div class="grid__col--xs-12">
<div class="styleguide__box">
<div class="grid__row grid__row--lg-left grid__row--xs-center grid__row--sm-right">
<div class="grid__col--xs-6">
<div class="styleguide__box styleguide__box--dark"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Source:
grid/_grid-examples.scss, line 66