---
layout: default
title: Mobile Grid Layout Test
description: Testing out the mobile grid for this site
---

<div class="container">
  <h2>Mobile Grid Demo</h2>
</div>

<style>

  article {
    height: 30px;
    background-color: gray;
    color: white;
  }

</style>

<div class="container">
  <div class="row">
    <article class="col-7@sm col-3@xs">
      col-7@sm | col-3@xs
    </article>
    <article class="col-4@sm col-1@xs">
      col-4@sm | col-1@xs
    </article>
    <article class="col-1@sm col-2@xs">
      col-1@sm | col-2@xs
    </article>
  </div>

  <hr>

  <div class="row">
    <article class="col-6@sm col-6@xs"></article>
  </div>

  <hr>

  <div class="row">
    <article class="col-5@sm col-3@xs"></article>
    <article class="col-7@sm col-3@xs"></article>
  </div>

  <hr>

  <article style="width:100%;text-align:center;">
    100%
  </article>
</div>