<section class="page">
  <article>
    <p>Article content</p>
  </article>
  <aside>
    <p>Aside content</p>
  </aside>
</section>
@import "neat@2.*";

// Define a custom grid
$medium-screen: (
  columns: 12, 
  media: 768px, 
  gutter: 20px
);


.page {
  @include grid-container;

  article {
    // Default columns for the element to span

    @include grid-column(12);

    @include grid-media($medium-screen) {
      // Number of columns for the element to span

      @include grid-column(8);
    }
  }

  aside {
    // Default columns for the element to span

    @include grid-column(12);

    @include grid-media($medium-screen) {
      // Number of columns for the element to span

      @include grid-column(4);
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.