---
layout: default
title:  "Grid"
date:   2013-05-17 23:24:04
---

Grid
====

The default Atlas grid system is built on the Twitter Bootstrap grid system, which utilizes 12 columns. It's a responsive grid system that adapts to the browser window in 2 different sizes: `940px`, `725px` and for smaller displays, fluid with the columns stacking vertically.

<div class="docs-grid">
  <div class="row show-grid">
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
  </div>
  <div class="row show-grid">
    <div class="span2">2</div>
    <div class="span3">3</div>
    <div class="span3">3</div>
  </div>
  <div class="row show-grid">
    <div class="span4">4</div>
    <div class="span4">4</div>
  </div>
  <div class="row show-grid">
    <div class="span8">8</div>
  </div>
</div>

~~~html
<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>
~~~