Grids alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.row _top

1
1
1
2
<div class="row _top">
    <div class="col-6">
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
    </div>
    <div class="col-6">
        <div class="box">2</div>
    </div>
</div>

.row _middle

1
1
1
2
<div class="row _middle">
    <div class="col-6">
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
    </div>
    <div class="col-6">
        <div class="box">2</div>
    </div>
</div>

.row _bottom

1
1
1
2
<div class="row _bottom">
    <div class="col-6">
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
    </div>
    <div class="col-6">
        <div class="box">2</div>
    </div>
</div>

Responsive alignment

Different alignment for different resizes, resize the window to view it on action.

1
1
1
2
<div class="row _top-l row _bottom-m row _middle-s">
    <div class="col-6">
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
    </div>
    <div class="col-6">
        <div class="box">2</div>
    </div>
</div>