• 2.2.1
<div class="grid grid--right mrgt">
    <div class="grid__item w-1/3">
        <div class="box box--default box--tiny text-center">Right</div>
    </div>
    <div class="grid__item w-1/3">
        <div class="box box--default box--tiny text-center">&nbsp;</div>
    </div>
</div>

<div class="grid grid--center mrgt">
    <div class="grid__item w-1/6">
        <div class="box box--default box--tiny text-center">&nbsp;</div>
    </div>
    <div class="grid__item w-1/6">
        <div class="box box--default box--tiny text-center">Center</div>
    </div>
    <div class="grid__item w-1/6">
        <div class="box box--default box--tiny text-center">&nbsp;</div>
    </div>
</div>

<div class="grid grid--middle mrgt">
    <div class="grid__item w-1/3">
        <div class="box box--default box--small">
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.</p>
        </div>
    </div>
    <div class="grid__item w-1/3">
        <div class="box box--default box--small text-center">Middle</div>
    </div>
    <div class="grid__item w-1/3">
        <div class="box box--default box--small">
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
    </div>
</div>

<div class="grid grid--bottom mrgt">
    <div class="grid__item w-1/3">
        <div class="box box--default box--small">
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.</p>
        </div>
    </div>
    <div class="grid__item w-1/3">
        <div class="box box--default box--small text-center">Bottom</div>
    </div>
    <div class="grid__item w-1/3">
        <div class="box box--default box--small">
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
    </div>
</div>

<div class="grid grid--even mrgt">
    <div class="grid__item w-1/3">
        <div class="box box--default box--small text-center">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima doloremque eos aspernatur consequatur facere aliquid tenetur odit ab vel. Quia at repellendus reprehenderit, magni, veritatis eos illum est cumque enim, facere quasi non voluptate culpa
            vero velit ratione atque ex.
        </div>
    </div>
    <div class="grid__item w-1/3">
        <div class="box box--default box--small text-center">
            Even
        </div>
    </div>
    <div class="grid__item w-1/3">
        <div class="box box--default box--small text-center">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id reprehenderit quisquam illum, cum totam numquam veniam, expedita magnam quos. Delectus suscipit ipsum voluptates non, assumenda obcaecati ratione, praesentium, maiores, magni rerum eos numquam
            molestiae veniam ut iste nobis corporis. Hic, ullam doloremque, corporis provident nesciunt perferendis distinctio neque est maxime architecto ducimus, similique reiciendis repudiandae eligendi, amet reprehenderit tempore magni?
        </div>
    </div>
</div>

Change columns alignment with .grid modifiers; combining horizontal (center, right) and vertical (middle, bottom) alignment are possible. Top and left are the default values.

  • Handle: @grid-alignment
  • Preview:
  • Filesystem Path: components/03-components/grid-and-widths/05-alignment.html