<div class="outer-container">

  <h2>Common mistakes</h2>
  <h3>Applying grid collapse to the top level container</h3>
  <div class="grid-container grid-collapse">
     <div class="box">
       <p>This box won't align with other grid elements.</p>
@import "neat@2.*";

body {
  margin: 0;
  font-size: 20px;
  font-family: monospace;
  text-align: center;

* {
  box-sizing: border-box;

.outer-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px 0;
  background-color: darkseagreen;

.grid-container {
  // all grid-columns should be wrappeed in a container element.
  @include grid-container;
  &.grid-collapse {
    // this removes the outer margins of the container, 
    // for use with nested grids.
    @include grid-collapse;

.grid-column {
  background-color: tomato;
  height: 200px;
  margin-bottom: 20px;
  .grid-column {
    background-color: orange;
  &.grid-column--6 {
    @include grid-column(6);

.box {
  background-color: lavender;
  padding: 20px;
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.