CSS Components and Styleguide

Vertical

Row Content Vertical Alignment

Sometimes columns need to live at the top, bottom or middle of a row.

There's classes for that too...

  • grid__row--$screenSize-top
  • grid__row--$screenSize-middle
  • grid__row--$screenSize-bottom
Example

Resize the screen to make the right column dance!

Markup: grid/row-vertical-alignment.html
                    <p>Resize the screen to make the right column dance!</p>
<div class="grid__row grid__row--xs-top grid__row--sm-middle grid__row--md-bottom">
    <div class="grid__col--xs-6">
        <div class="styleguide__box styleguide__box--lg"></div>
    </div>
    <div class="grid__col--xs-6">
        <div class="styleguide__box"></div>
    </div>
</div>
                  
Source: grid/_grid-examples.scss, line 81