Layout
Grid based layout for quickly building 2 column layouts.
Grid Layouts
There are different types of 2 columns based layout.
Layout Spacious
Layout Full
These layouts consist of two columns, labeled as layout-main
and layout-aside
, which are designed to be responsive and will automatically adjust and stack on smaller screens.
Layout Spacious
A 2-column layout that utilizes only 10 grid lines, with the remaining space being used as empty space.
Class | Definition |
---|---|
layout--spacious |
span layout-main 10 columns |
layout--spacious-80 |
span layout-main 8 columns |
layout--spacious-60 |
span layout-main 6 columns |
layout--spacious-40 |
span layout-main 4 columns |
layout--spacious-50-40 |
span layout-main 5 columns & layout-aside 4 columns |
layout--spacious-40-50 |
span layout-aside 4 columns & layout-main 5 columns |
layout--spacious-50-50 |
span layout-main 5 columns & layout-aside 5 columns |
layout--spacious-60-40 |
span layout-main 6 columns & layout-aside 4 columns |
layout--spacious-40-60 |
span layout-aside 4 columns & layout-main 6 columns |
layout--spacious-70-20 |
span layout-main 7 columns & layout-aside 2 columns |
layout--spacious-20-70 |
span layout-aside 2 columns & layout-main 7 columns |
layout--spacious-70-30 |
span layout-main 7 columns & layout-aside 3 columns |
layout--spacious-30-70 |
span layout-aside 3 columns & layout-main 7 columns |
layout--spacious-80-20 |
span layout-main 8 columns & layout-aside 8 columns |
layout--spacious-20-80 |
span layout-aside 2 columns & layout-main 2 columns |
layout--spacious-80-10 |
span layout-main 8 columns & layout-aside 1 columns |
layout--spacious-10-80 |
span layout-aside 1 columns & layout-main 8 columns |
layout-main
layout-main
layout-aside
<section class="layout layout--spacious-80">
<div class="layout-main">
<h2>layout-main</h2>
</div>
</section>
<section class="layout layout--spacious-50-40">
<div class="layout-main">
<h2>layout-main</h2>
</div>
<div class="layout-aside">
<h2>layout-aside</h2>
</div>
</section>
Layout Full
A 2-column layout that utilizes all 12 grid columns.
Class | Definition |
---|---|
layout--full |
span layout-main 12 columns |
layout--full-50-40 |
span layout-main 5 columns & layout-aside 4 columns |
layout--full-40-50 |
span layout-aside 4 columns & layout-main 5 columns |
layout--full-50-50 |
span layout-main 5 columns & layout-aside 5 columns |
layout--full-60-40 |
span layout-main 6 columns & layout-aside 4 columns |
layout--full-40-60 |
span layout-aside 4 columns & layout-main 6 columns |
layout--full-60-60 |
span layout-main 6 columns & layout-aside 6 columns |
layout--full-70-40 |
span layout-main 7 columns & layout-aside 4 columns |
layout--full-40-70 |
span layout-aside 4 columns & layout-main 7 columns |
layout--full-70-30 |
span layout-main 7 columns & layout-aside 3 columns |
layout--full-30-70 |
span layout-aside 3 columns & layout-main 7 columns |
layout--full-70-50 |
span layout-main 7 columns & layout-aside 5 columns |
layout--full-50-70 |
span layout-aside 5 columns & layout-main 7 columns |
layout--full-40-80 |
span layout-aside 4 columns & layout-main 8 columns |
layout--full-80-40 |
span layout-main 8 columns & layout-aside 4 columns |
layout--full-30-80 |
span layout-aside 3 columns & layout-main 8 columns |
layout--full-80-30 |
span layout-main 3 columns & layout-aside 8 columns |
layout--full-20-80 |
span layout-aside 2 columns & layout-main 8 columns |
layout--full-80-20 |
span layout-main 8 columns & layout-aside 2 columns |
layout--full-10-80 |
span layout-aside 1 columns & layout-main 8 columns |
layout--full-80-10 |
span layout-main 8 columns & layout-aside 1 columns |
layout-main
layout-main
layout-aside
<section class="layout layout--full">
<div class="layout-main">
<h2>layout-main</h2>
</div>
</section>
<section class="layout layout--spacious-70-50">
<div class="layout-main">
<h2>layout-main</h2>
</div>
<div class="layout-aside">
<h2>layout-aside</h2>
</div>
</section>
Multi Columns
Layout 2 Columns
Use layout-2-col
for 2 columns layout
layout-main
layout-aside
<section class="layout layout-2-col">
<div class="layout-main bg-secondary--xlight p-4">
<h2>layout-main</h2>
</div>
<div class="layout-aside bg-gray--light p-4">
<h2>layout-aside</h2>
</div>
</section>
Layout Aside Fixed
Layout with aside fixed.
layout-2-col--fixed-aside-right
layout-2-col--fixed-aside-left
layout-main
layout-aside
<section class="layout layout-2-col--fixed-aside-left">
<div class="layout-main bg-secondary--xlight p-4">
<h2>layout-main</h2>
</div>
<div class="layout-aside width-10 bg-gray--light p-4">
<h2>layout-aside</h2>
</div>
</section>
Layout 3 Columns
Use layout-3-col
for 3 columns layout.
Starter
Pro
Business
<section class="layout layout-3-col">
<div class="bg-secondary--xlight p-4">
<h2>Starter</h2>
</div>
<div class="bg-tertiary--light p-4">
<h2>Pro</h2>
</div>
<div class="bg-gray--light p-4">
<h2>Business</h2>
</div>
</section>
Layout 4 Columns
Use layout-4-col
for 4 columns layout.
Starter
Hobbyist
Pro
Business
<section class="layout layout-3-col">
<div class="bg-warning--xlight p-4">
<h2>Starter</h2>
</div>
<div class="bg-secondary--xlight p-4">
<h2>Hobbyist</h2>
</div>
<div class="bg-tertiary--light p-4">
<h2>Pro</h2>
</div>
<div class="bg-gray--light p-4">
<h2>Business</h2>
</div>
</section>
Layout Auto Fit
Use layout-auto-fit
to create as many columns as can fit within the available space.
<section class="layout layout-auto-fit gap-4">
<div class="height-6 bg-secondary rounded"></div>
<div class="height-6 bg-secondary rounded"></div>
</section>
Layout Auto Fill
Use layout-auto-fill
instead of layout-auto-fit
in the same way, but it will create as many columns as can fit within the available space, but unlikelayout-auto-fit
, it will not shrink the columns if there’s not enough space.
<section class="layout layout-auto-fill gap-4">
<div class="height-6 bg-secondary rounded"></div>
<div class="height-6 bg-secondary rounded"></div>
</section>
Layout Helpers
md-break
All layout above stack at sm
breakpoint.
Use md-break
to stack them at md
breakpoint.
layout-main
layout-aside
<section class="layout layout--spacious-50-40 md-break">
<div class="layout-main bg-secondary--xlight p-4">
<h2>layout-main</h2>
</div>
<div class="layout-aside bg-gray--light p-4">
<h2>layout-aside</h2>
</div>
</section>
reverse
sm-reverse
and md-break-reverse
to change the stack order at respective breakpoint.
layout-main
layout-aside
<section class="layout layout--spacious-40-50 md-break-reverse">
<div class="layout-main bg-secondary--xlight p-4">
<h2>layout-main</h2>
</div>
<div class="layout-aside bg-gray--light p-4">
<h2>layout-aside</h2>
</div>
</section>