• 2.5.0

Spaced Rows 

<div class="grid grid--multiline">
    <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/4">
        <div class="box box--default box--tiny text-center">&nbsp;</div>
    </div>
    <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/4">
        <div class="box box--default box--tiny text-center">&nbsp;</div>
    </div>
    <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/4">
        <div class="box box--default box--tiny text-center">&nbsp;</div>
    </div>
    <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/4">
        <div class="box box--default box--tiny text-center">&nbsp;</div>
    </div>
    <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/4">
        <div class="box box--default box--tiny text-center">&nbsp;</div>
    </div>
    <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/4">
        <div class="box box--default box--tiny text-center">&nbsp;</div>
    </div>
</div>

By default no space is added between rows, resulting in grid items being stuck together. To space them out, add the class .grid--multiline. The distance is proportionnal to the gutters, meaning it changes along with grid size classes (.grid--tiny, .grid--small, …).

  • Handle: @grid-spaced-rows
  • Preview:
  • Filesystem Path: components/03-components/grid-and-widths/04-spaced-rows.html