Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example usage of Shopify's Slate grid in District
<div class="grid">
<div class="grid__item one-half medium-down--one-whole">
<p>One Half<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-half medium-down--one-whole">
<p>One Half<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-quarter large--one-half medium-down--one-whole">
<p>One Quarter<br>
One Half (large)<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-quarter large--one-half medium-down--one-whole">
<p>One Quarter<br>
One Half (large)<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-quarter large--one-half medium-down--one-whole">
<p>One Quarter<br>
One Half (large)<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-quarter large--one-half medium-down--one-whole">
<p>One Quarter<br>
One Half (large)<br>
One Whole (medium down)</p>
</div>
</div>
@jonathanmoore

This comment has been minimized.

Copy link
Owner Author

jonathanmoore commented Oct 23, 2017

Basic two column layout that stacks vertically into one column for mobile.

<div class="grid">
  <div class="grid__item one-half small--one-whole">
    <p>One Half<br>
    One Whole (mobile)</p>
  </div>
  <div class="grid__item one-half small--one-whole">
    <p>One Half<br>
    One Whole (mobile)</p>
  </div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.