Grid

ExpressiveCSS uses a standard 12-column fluid responsive grid to help you lay out your page.

Container

Add the container class to center the page and cap how wide it can grow, so a paragraph does not stretch across a 4K monitor. It is not strictly part of the grid, but it matters for laying out content. Its width is a percentage of the viewport (90% on Compact, 85% from Medium, 70% from Expanded, 75% from Extra-large). A max-width token caps that percentage at 1280px by default and 1920px from the extra-large breakpoint (1600px). To change the cap, override the tokens or pick a modifier:

• container is the default, capped at 1280px and then 1920px.
• container wide raises the cap to 2400px, for dashboards and media.
• container max uses 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, put your content inside a <div> tag with a container class. A page might be set up like this:

<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

This section shows how the grid works.

12 columns

The grid has 12 columns. At every browser size, the columns have equal widths.

The HTML below produces a result similar 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>

s1 is one column wide at the default Compact size and up.

Columns live inside rows

Put every column 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 a column, add a class such as offset-s2, where s is the screen class prefix (s = Compact, m = Medium, l = Expanded, xl = Large, xxl = Extra-large) and the number is how many columns to offset by.

Offsets count from the left edge of the row, not from the previous column. For 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

Columns have a default gap (g-3). To change it, add one of g-0 to g-5 to the element with the row class.

Standard gap (g-3)

No gap (g-0)

Bigger gap (g-4)

<div class="row g-4">
  <div class="s4">1</div>
  <div class="s4">2</div>
  <div class="s4">3</div>
</div>

Push and pull

Deprecated. The grid now uses CSS Grid, so change placement with offsets or empty columns.

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

These examples build some common layouts with the grid. To keep them simple, they are not responsive.

Example sections and dividers

<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

For 3 divs of equal size, give each a width of 4 columns, since 4+4+4 adds up to 12. Put your content inside those divs.

<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

For an even layout, make sure your column numbers add up to 12.

<!-- 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

The examples above lay out elements with the grid. This section shows how to make those layouts adapt to each screen size.

Screen sizes

Use xxl for widescreen, which is Material's extra-large window class. The grid keeps twelve columns there instead of sixteen tracks. A 4K monitor gets a wider container and room to reflow, such as into three panes or four cards. container wide raises the cap to 2400px, and container max drops it.

Adding responsiveness

To make a layout responsive, set the other sizes explicitly. The previous examples set only the default Compact size with s12. That works for a fixed layout, because the rules apply upward to larger sizes. s12 alone means s12 m12 l12.

<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

This example makes the same layout responsive by setting how many columns each div takes at each screen size. Resize your browser to watch the layout change.

<!-- 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 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>