in available credit

Go Back
skip navigation

Grid Columns Example

Our grid system has 4 breakpoints and is divided into a number of columns with a corresponding gutter, depending on the breakpoint. A wrapper outside the grid element sets the max-width and outer margins.

Size Breakpoint Columns Gutter Size Outer Margin
sml 0px 4 columns 16px 24px
med 600px 12 columns 24px 32px
lrg 900px 12 columns 24px 32px
xlg 1200px 16 columns 24px 32px


The basic structure looks like this:

<div class="wrapper wrapper--v1">
  <div class="grid grid--columns">
    <div class="grid__item"></div>
  </div>
</div>


Below is a responsive demo of the grid, where the number of elements you see changes according to the width of the viewport.

Col. 1
Col. 2
Col. 3
Col. 4
Col. 1
Col. 2
Col. 3
Col. 4
Col. 5
Col. 6
Col. 7
Col. 8
Col. 9
Col. 10
Col. 11
Col. 12
Col. 1
Col. 2
Col. 3
Col. 4
Col. 5
Col. 6
Col. 7
Col. 8
Col. 9
Col. 10
Col. 11
Col. 12
Col. 13
Col. 14
Col. 15
Col. 16

Defining Placement and Width


Additional classes on the grid__items control the start point and width using this formula:

grid__item--[BREAKPOINT NAME]-[ACTION]-[COL VALUE]

For example, the grid item below will, starting at 0px viewport width, span 4 columns and then, at viewports wider than 600px, will start at the 6th column in the grid:

<div class="grid__item grid__item--sml-spans-4 grid__item--med-start-6">
Example: 4 columns wide, starts at column 6 at med. vp's

All our media queries are mobile first via min-width, so once a start position or width has been declared for an element at a breakpoint, it will hold true for that element at all viewport widths beyond the breakpoint that has been declared until it is overwritten by a class that uses a wider viewport width. In this way, an element's position and width cascade from smallest viewport widths to largest.

You can also force grid items that have not taken up the full width of the grid yet with --[BREAKPOINT NAME]-start-1, which causes that grid__item to start on the first column of a grid below the previous grid__items. This allows for a grid__item to start at any column at multiple breakpoints.

grid__item--[SIZE NAME]-start-1

A Responsive, Asymetrical Example

Here's an example of how all this might be used:

Theme Versioning


There is some overlap between the class names of our current grid and this new grid system so, to avoid conflicts, the new classes exist only in a separate stylesheet. This is set via a theme setting in Shopify:

cdn.shopify.com/s/files/1/0951/7126/t/1422/assets/stylesheet-v1.css

Grid Overlay


In order to confirm that elements are aligning to the grid, we've created a grid overlay. It's responsive and changes color with our new breakpoints. It's also controlled via a setting in Shopify and will always be turned on in your preview theme, but you can also hide with document.getElementById('overlayGrid').style.display='none'; or targeting #overlayGrid in your user agent stylesheet.


Shopping Cart
×

We’re raising our prices soon.

Since our launch five years ago, prices of cotton and other key commodities have significantly increased. Paying our suppliers fairly and providing you with the best products on the market is paramount to us—to that end, prices of some of our Classic and Luxe sheets will rise up to 15% starting March 26th, 2019.

Hi, want 10% off? Hi, want 10% off?

Don`t miss the best sleep of your life. Don`t miss the best sleep of your life.

Great! Great!

Simply confirm your email to access your 10% off Simply confirm your email to access your 10% off

You’re in!

Complete your sign up by submitting your phone number below (optional) Complete your sign up by submitting your phone number below (optional)

Something went wrong

You`re all set! You`re all set!

It`s time to start shopping. It`s time to start shopping.