Grids
Auto Columns
Auto columns using flexbox let the browser decide when and how to configure columns based on the content inside —
just add col col--auto to the element. There is no limit to the number of auto columns you can add.
Use margin--none on the row to turn off row margins, and use margin--off on the row
to turn off columns margins.
100%
<div class="container">
<div class="row">
<div class="col col--auto">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--auto">
50%
</div>
<div class="col col--auto">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--auto">
33%
</div>
<div class="col col--auto">
33%
</div>
<div class="col col--auto">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--auto">
25%
</div>
<div class="col col--auto">
25%
</div>
<div class="col col--auto">
25%
</div>
<div class="col col--auto">
25%
</div>
</div>
</div>Breakpoint Columns
The columns you're used to, from XXS all the way up to XXL. Use margin--none on the row to turn off
row margins, and use margin--off on the row to turn off columns margins.
XXS & Up
100%
<div class="container">
<div class="row">
<div class="col col--xxs-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--xxs-6">
50%
</div>
<div class="col col--xxs-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--xxs-4">
33%
</div>
<div class="col col--xxs-4">
33%
</div>
<div class="col col--xxs-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--xxs-3">
25%
</div>
<div class="col col--xxs-3">
25%
</div>
<div class="col col--xxs-3">
25%
</div>
<div class="col col--xxs-3">
25%
</div>
</div>
</div>XS & Up
100%
<div class="container">
<div class="row">
<div class="col col--xs-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--xs-6">
50%
</div>
<div class="col col--xs-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--xs-4">
33%
</div>
<div class="col col--xs-4">
33%
</div>
<div class="col col--xs-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--xs-3">
25%
</div>
<div class="col col--xs-3">
25%
</div>
<div class="col col--xs-3">
25%
</div>
<div class="col col--xs-3">
25%
</div>
</div>
</div>SM & Up
100%
<div class="container">
<div class="row">
<div class="col col--sm-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--sm-6">
50%
</div>
<div class="col col--sm-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--sm-4">
33%
</div>
<div class="col col--sm-4">
33%
</div>
<div class="col col--sm-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--sm-3">
25%
</div>
<div class="col col--sm-3">
25%
</div>
<div class="col col--sm-3">
25%
</div>
<div class="col col--sm-3">
25%
</div>
</div>
</div>MD & Up
100%
<div class="container">
<div class="row">
<div class="col col--md-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--md-6">
50%
</div>
<div class="col col--md-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--md-4">
33%
</div>
<div class="col col--md-4">
33%
</div>
<div class="col col--md-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--md-3">
25%
</div>
<div class="col col--md-3">
25%
</div>
<div class="col col--md-3">
25%
</div>
<div class="col col--md-3">
25%
</div>
</div>
</div>LG & Up
100%
<div class="container">
<div class="row">
<div class="col col--lg-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--lg-6">
50%
</div>
<div class="col col--lg-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--lg-4">
33%
</div>
<div class="col col--lg-4">
33%
</div>
<div class="col col--lg-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--lg-3">
25%
</div>
<div class="col col--lg-3">
25%
</div>
<div class="col col--lg-3">
25%
</div>
<div class="col col--lg-3">
25%
</div>
</div>
</div>XL & Up
100%
<div class="container">
<div class="row">
<div class="col col--xl-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--xl-6">
50%
</div>
<div class="col col--xl-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--xl-4">
33%
</div>
<div class="col col--xl-4">
33%
</div>
<div class="col col--xl-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--xl-3">
25%
</div>
<div class="col col--xl-3">
25%
</div>
<div class="col col--xl-3">
25%
</div>
<div class="col col--xl-3">
25%
</div>
</div>
</div>XXL & Up
100%
<div class="container">
<div class="row">
<div class="col col--xxl-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--xxl-6">
50%
</div>
<div class="col col--xxl-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--xxl-4">
33%
</div>
<div class="col col--xxl-4">
33%
</div>
<div class="col col--xxl-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--xxl-3">
25%
</div>
<div class="col col--xxl-3">
25%
</div>
<div class="col col--xxl-3">
25%
</div>
<div class="col col--xxl-3">
25%
</div>
</div>
</div>