Grid with wrap
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 4
1 / 4
1 / 4
1 / 4
1 / 3
1 / 3
1 / 3
1 / 2
1 / 2
Grid with wrap & padded
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 4
1 / 4
1 / 4
1 / 4
1 / 3
1 / 3
1 / 3
1 / 2
1 / 2
Grid with wrap
<div class="wrap">
<div class="grid">
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
</div>
<div class="grid">
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
</div>
<div class="grid">
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
</div>
<div class="grid">
<div class="grid__col grid__col--4">1 / 3</div>
<div class="grid__col grid__col--4">1 / 3</div>
<div class="grid__col grid__col--4">1 / 3</div>
</div>
<div class="grid">
<div class="grid__col grid__col--6">1 / 2</div>
<div class="grid__col grid__col--6">1 / 2</div>
</div>
</div>
Grid without wrap
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 4
1 / 4
1 / 4
1 / 4
1 / 3
1 / 3
1 / 3
1 / 2
1 / 2
Grid with wrap & padded
<div class="wrap wrap--padded">
<div class="grid">
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
</div>
<div class="grid">
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
</div>
<div class="grid">
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
</div>
<div class="grid">
<div class="grid__col grid__col--4">1 / 3</div>
<div class="grid__col grid__col--4">1 / 3</div>
<div class="grid__col grid__col--4">1 / 3</div>
</div>
<div class="grid">
<div class="grid__col grid__col--6">1 / 2</div>
<div class="grid__col grid__col--6">1 / 2</div>
</div>
</div>
Grid padded without wrap
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 4
1 / 4
1 / 4
1 / 4
1 / 3
1 / 3
1 / 3
1 / 2
1 / 2
Grid without wrap
<div class="grid">
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
</div>
<div class="grid">
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
</div>
<div class="grid">
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
</div>
<div class="grid">
<div class="grid__col grid__col--4">1 / 3</div>
<div class="grid__col grid__col--4">1 / 3</div>
<div class="grid__col grid__col--4">1 / 3</div>
</div>
<div class="grid">
<div class="grid__col grid__col--6">1 / 2</div>
<div class="grid__col grid__col--6">1 / 2</div>
</div>
Responsive Grid Demo
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
Grid padded without wrap
<div class="wrap--padded">
<div class="grid">
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
<div class="grid__col grid__col--1">1 / 12</div>
</div>
<div class="grid">
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
<div class="grid__col grid__col--2">1 / 6</div>
</div>
<div class="grid">
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
<div class="grid__col grid__col--3">1 / 4</div>
</div>
<div class="grid">
<div class="grid__col grid__col--4">1 / 3</div>
<div class="grid__col grid__col--4">1 / 3</div>
<div class="grid__col grid__col--4">1 / 3</div>
</div>
<div class="grid">
<div class="grid__col grid__col--6">1 / 2</div>
<div class="grid__col grid__col--6">1 / 2</div>
</div>
</div>
Responsive Grid Demo
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
Responsive Grid Demo
<div class="wrap">
<div class="grid">
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
<div class="grid__col grid__col--12 grid__col-sm--6 grid__col-md--3 grid__col-lg--1">1 / 12</div>
</div>
</div>
Grid Documentation
Use
To change the grid column at a breakpoint add a class specifying the column width and breakpoint to change at (options: sm / md / lg).
The grid has been built to be mobile first.
Use wrap and wrap--padded to set the main content wrap. Please not some components will need to sit outside this wrap if they are to stretch full width of the screen. They will have their own content wrap within.