We are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.
Container
The container class is not strictly part of the grid but is important in laying out content. It
centers the page and caps how wide it can grow, so a paragraph does not stretch across a 4K
monitor. Width is a percentage of the viewport (90% on Compact, 85% from Medium, 70% from
Expanded, 75% from Extra-large). A max-width token stops that percentage from swallowing the
screen: 1280px by default, 1920px from the extra-large breakpoint
(1600px). Override the tokens, or pick a modifier:
container— default measure, 1280 then 1920.container wide— 2400px cap, for dashboards and media.container max— the percentage with no cap.
Demo
Try the button below to see what the page looks like without containers.
Turn off Containers
To add a container just put your content inside a
<div>
tag with a container class. Here's an example of how your page might be set up.
<body>
<div class="container">
<!-- Page Content goes here -->
</div>
</body>
<!-- dashboard / media that should keep growing -->
<div class="container wide">…</div>
<!-- percentage only, no cap -->
<div class="container max">…</div>Introduction
Take a look at this section to quickly understand how the grid works!
12 Columns
Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.
To get a feel of how the grid is used in HTML, take a look at the code below which will produce a similar result to the one above.
<div class="row">
<div class="s1">1</div>
<div class="s1">2</div>
<div class="s1">3</div>
<div class="s1">4</div>
<div class="s1">5</div>
<div class="s1">6</div>
<div class="s1">7</div>
<div class="s1">8</div>
<div class="s1">9</div>
<div class="s1">10</div>
<div class="s1">11</div>
<div class="s1">12</div>
</div>
Note: For now, just know that the
s1 is one column at the Compact/default size and up.
Columns live inside Rows
Remember when you are creating your layout that all columns must be contained inside a row. Size
each inner div with a
screen-prefix class such as s12 or m6.
<div class="row">
<div class="s12">This div is 12-columns wide on all screen sizes</div>
<div class="s6">6-columns (one-half)</div>
<div class="s6">6-columns (one-half)</div>
</div>Offsets
To offset, simply add
offset-s2 to the class where s signifies the screen class-prefix (s =
small, m = medium, l = large, xl = extra-large, xxl = widescreen) and the number after is the
number of columns you want to offset by.
Attention! Offsets are calculated absolutely starting from the left. If you need relative offsets, add empty columns to the row.
<div class="row">
<div class="s12">This div is 12-columns wide on all screen sizes</div>
<div class="s6 offset-s6">6-columns (offset-by-6)</div>
</div>
<div class="row">
<div class="l6">l6 column</div>
<div class="l4 offset-l8">l4 column (offset-l8)</div>
</div>
<div class="row">
<div class="l2 offset-l3">offset-l3</div>
<div class="l2 offset-l6">offset-l6</div>
<div class="l2 offset-l9">offset-l9</div>
</div>
<div class="row">
<div class="l2">col</div>
<div class="l2"></div>
<div class="l2">relative offset 2</div>
</div>Gaps
There is a default gap between the columns (g-3). You can easily change the gap with the gap
classes. Simply add
g-0 to g-5 to the element with the row class.
Standard Gaps (g-3)
No Gap (g-0)
Bigger Gap (g-4)
<div class="row g-4">
<div class="s3">1</div>
<div class="s3">2</div>
<div class="s3">3</div>
<div class="s3">4</div>
</div>Push and Pull
Deprecated. CSS Grid is used now — use offsets, or empty columns, to change placement.
Older versions reordered columns with
push-s2 or pull-s2, where s is the screen class-prefix
and the number is how many
columns to push or pull by. Those classes are no longer part of the grid.
Creating Layouts
Here we will show you how to create some commonly used layouts with our grid system. Hopefully these will get you more comfortable with laying out elements. To keep these demos simple, the ones here will not be responsive.
Section
The section class is used for simple top and bottom padding. Just add the
section class to your divs containing large blocks of content.
Divider
Dividers are 1 pixel lines that help break up your content. Just add the
divider class to a div in between your content.
Example Sections and Dividers
Section 1
Stuff
Section 2
Stuff
Section 3
Stuff
<div class="divider"></div>
<div class="section">
<h5>Section 1</h5>
<p>Stuff</p>
</div>
<div class="divider"></div>
<div class="section">
<h5>Section 2</h5>
<p>Stuff</p>
</div>
<div class="divider"></div>
<div class="section">
<h5>Section 3</h5>
<p>Stuff</p>
</div>Example Promotion Table
If we want 3 divs that are equal size, we define the divs with a width of 4-columns, as 4+4+4 nicely adds up to 12. Inside those divs, we can put our content.
Speeds up development
Most of the heavy lifting is done for you to provide default stylings that incorporate our custom components. We also refined animations and transitions to provide a smoother experience for developers.
User Experience Focused
By utilizing elements and principles of Material Design, we were able to create a framework that focuses on User Experience.
Easy to work with
We have provided detailed documentation as well as specific code examples to help new users get started.
<div class="row">
<div class="s4">
<!-- Promo Content 1 goes here -->
</div>
<div class="s4">
<!-- Promo Content 2 goes here -->
</div>
<div class="s4">
<!-- Promo Content 3 goes here -->
</div>
</div>Example Side Navigation Layout
You can see how easy it is to create layouts using the grid system. Just remember to make sure your column numbers add up to 12 for an even layout.
<!-- Navbar goes here -->
<!-- Page Layout here -->
<div class="row">
<div class="s3">
<!-- Grey navigation panel -->
</div>
<div class="s9">
<!-- Teal page content -->
</div>
</div>Creating Responsive Layouts
Above we showed you how to layout elements using our grid system. Now we'll show you how to design your layouts so that they look great on all screen sizes.
Screen Sizes
| Compact < 600px | Medium 600–839px | Expanded 840–1199px | Large 1200–1599px | Extra-large ≥ 1600px | |
|---|---|---|---|---|---|
| Class Prefix | .s |
.m |
.l |
.xl |
.xxl |
| Container Width | 90% | 85% | 70% | 70% | 75% |
| Max Width | 1280px | 1280px | 1280px | 1280px | 1920px |
| Number of Columns | 12 | 12 | 12 | 12 | 12 |
Widescreen is Material’s extra-large window class. The twelve columns stay twelve — a 4K
monitor does not need sixteen tracks, it needs a wider container and a chance to reflow
(three panes, four cards). Use xxl for that. container wide raises
the cap to 2400px; container max drops it.
Adding Responsiveness
In the previous examples, we only defined the Compact/default size using s12.
This is fine if we want a fixed layout
since the rules propagate upwards. By just saying s12, we are essentially saying s12 m12
l12. But by explicitly defining
the size we can make our website more responsive.
<div class="row">
<div class="s12">I am always full-width (s12)</div>
<div class="s12 m6">I am full-width on mobile (s12 m6)</div>
</div>Responsive Side Navigation Layout
In this example below, we take the same layout from above, but we make it responsive by defining how many columns the div should take up on each screen size. Try resizing your browser and watch the layout change below.
<!-- Navbar goes here -->
<!-- Page Layout here -->
<div class="row">
<div class="s12 m4 l3">
<!-- Grey navigation panel
This content will be:
3-columns-wide on Expanded and larger screens,
4-columns-wide on Medium screens,
12-columns-wide on Compact screens -->
</div>
<div class="s12 m8 l9">
<!-- Teal page content
This content will be:
9-columns-wide on Expanded and larger screens,
8-columns-wide on Medium screens,
12-columns-wide on Compact screens -->
</div>
</div>More Responsive Grid Examples
<div class="row">
<div class="s12">s12</div>
<div class="s12 m4 l2">s12 m4 l2</div>
<div class="s12 m4 l8">s12 m4 l8</div>
<div class="s12 m4 l2">s12 m4 l2</div>
</div>
<div class="row">
<div class="s12 m6 l3">s12 m6 l3</div>
<div class="s12 m6 l3">s12 m6 l3</div>
<div class="s12 m6 l3">s12 m6 l3</div>
<div class="s12 m6 l3">s12 m6 l3</div>
</div>Widescreen / 4K
Extra-large windows can hold a third pane that would be cramped on a laptop. The aside stacks
full-width until xxl, then sits as two columns beside an eight-column main. Four
equal cards drop from 6-wide on tablet to 3-wide on a 4K monitor.
<div class="row">
<div class="s12 l3 xxl2">nav</div>
<div class="s12 l9 xxl8">main</div>
<div class="s12 xxl2">aside</div>
</div>
<div class="row">
<div class="s12 m6 l4 xxl3">…</div>
<div class="s12 m6 l4 xxl3">…</div>
<div class="s12 m6 l4 xxl3">…</div>
<div class="s12 m6 l4 xxl3">…</div>
</div>