Grid
Create a dynamic 1, 2, 3 or 4 column grid.
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
.l-grid--clean
Modifier to remove bottom margins on each column.
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
.l-grid--space-between
Use space between instead of margins for gutters. This is useful for mixed width columns.
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
<div class="l-grid__wrapper">
<section class="l-grid {{ modifier_class }}">
<div class="l-grid__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>
<section class="l-grid {{ modifier_class }}">
<div class="l-grid__col l-grid__col-half" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-half" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>
<section class="l-grid {{ modifier_class }}">
<div class="l-grid__col l-grid__col-third" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-third" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-third" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>
<section class="l-grid {{ modifier_class }}">
<div class="l-grid__col l-grid__col-fourth" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-fourth" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-fourth" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-grid__col l-grid__col-fourth" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>
</div>