Layout – Grids
A 12 column layouting option using css grid based properties. Allows for responsive layouting based on responsive break points
<div class="app-grid">
<div class="grid__col-3">Column 3</div>
<div class="grid__col-3">Column 3</div>
<div class="grid__col-6">Column 6</div>
<div class="grid__col-4">Column 4</div>
<div class="grid__col-8">Column 8</div>
<div class="grid__col-5">Column 5</div>
<div class="grid__col-7">Column 7</div>
</div>
<div class="app-grid is--gap-10">
<div class="grid__col-2">Column 2</div>
<div class="grid__col-3">Column 3</div>
<div class="grid__col-2">Column 2</div>
<div class="grid__col-5">Column 5</div>
</div>
<div class="app-grid is--gap-20">
<div class="grid__col-6">Column 6</div>
<div class="grid__col-6">Column 6</div>
</div>
Responsive grid using prefixed classes:
“sm” prefix uses breakpoint as 768px. Above this the columns will span 6 column and below breakpoint will span 12 columns as defined here.
.grid__col-12 .grid__col-sm-6
.grid__col-12 .grid__col-sm-6
“md” prefix uses breakpoint as 992px. Above this the columns will span 6 column and below breakpoint will span 12 columns as defined here.
.grid__col-12 .grid__col-sm-6
.grid__col-12 .grid__col-sm-6
“lg” prefix uses breakpoint as 1200px. Above this the columns will span 6 column and below breakpoint will span 12 columns as defined here.
.grid__col-12 .grid__col-sm-4
.grid__col-12 .grid__col-sm-4
.grid__col-12 .grid__col-sm-4
Responsive class options:
Default (< 768px) | Small (> 768px) | Medium (> 992) | Large (> 1200) | |
---|---|---|---|---|
Class Prefix | .grid__col- | .grid__col-sm- | .grid__col-md- | .grid__col-lg- |
<div class="app-grid is--gap-sm-10">
<div class="grid__col-12 grid__col-sm-6">
.grid__col-12 .grid__col-sm-6
</div>
<div class="grid__col-12 grid__col-sm-6">
.grid__col-12 .grid__col-sm-6
</div>
</div>
<div class="app-grid is--gap-md-10">
<div class="grid__col-12 grid__col-md-6">
.grid__col-12 .grid__col-md-6
</div>
<div class="grid__col-12 grid__col-md-6">
.grid__col-12 .grid__col-md-6
</div>
</div>