<h2>A Simple Two-column Grid with sGrid</h2>
<div class="my-grid">
  <div class="my-cell">First cell</div>
  <div class="my-cell">Second cell</div>
</div>

<p class="p">Demo by Julian Ćwirko. <a href="http://www.sitepoint.com" target="_blank">See article</a>.</p>
body
  text-align center
  padding 20px

/* ...sGrid loaded from:
https://codepen.io/SitePoint/pen/bf2645f66d89c4245c8691509b134155

See: https://github.com/juliancwirko/s-grid */

/* Here are custom demo styles */

.my-grid
    background-color #E9E9EA
    margin-top rem-calc(100)
    center(500)
    grid()
    .my-cell
        stack()
        padding rem-calc(10)
        background-color #D5D5D7
        @media screen and (min-width: rem-calc(breakpoints[md]))
          cell(1, 2)

.p
  padding-top 130px
  font-size 13px
View Compiled
Run Pen

External CSS

  1. https://codepen.io/SitePoint/pen/bf2645f66d89c4245c8691509b134155

External JavaScript

This Pen doesn't use any external JavaScript resources.