Simple Grid System Sample 1

Window width: px

sm-12
sm-11
sm-1
sm-10
sm-2
sm-9
sm-3
sm-8
sm-4
sm-7
sm-5
sm-6
sm-6
sm-5
sm-7
sm-4
sm-8
sm-3
sm-9
sm-2
sm-10
sm-1
sm-11
sm-12
sm-1
sm-1
sm-1
sm-1
sm-1
sm-1
sm-1
sm-1
sm-1
sm-1
sm-1
sm-1
sm-2
sm-2
sm-2
sm-2
sm-2
sm-2
sm-3
sm-3
sm-3
sm-3
sm-4
sm-4
sm-4
sm-5
sm-7
sm-6
sm-6
sm-7
sm-5
sm-8
sm-4
sm-9
sm-3
sm-10
sm-2
sm-11
sm-1
sm-12
<div class="container">
  <div class="row">
    <h1>Simple Grid System Sample 1</h1>
  </div>
  <div class="row">
    <div class="sm-12">sm-12</div>
  </div>
  <div class="row">
    <div class="sm-11">sm-11</div>
    <div class="sm-1">sm-1</div>
  </div>
  <div class="row">
    <div class="sm-10">sm-10</div>
    <div class="sm-2">sm-2</div>
  </div>
  <div class="row">
    <div class="sm-9">sm-9</div>
    <div class="sm-3">sm-3</div>
  </div>
  <div class="row">
    <div class="sm-8">sm-8</div>
    <div class="sm-4">sm-4</div>
  </div>
  <div class="row">
    <div class="sm-7">sm-7</div>
    <div class="sm-5">sm-5</div>
  </div>
  <div class="row">
    <div class="sm-6">sm-6</div>
    <div class="sm-6">sm-6</div>
  </div>
  <div class="row">
    <div class="sm-5">sm-5</div>
    <div class="sm-7">sm-7</div>
  </div>
  <div class="row">
    <div class="sm-4">sm-4</div>
    <div class="sm-8">sm-8</div>
  </div>
  <div class="row">
    <div class="sm-3">sm-3</div>
    <div class="sm-9">sm-9</div>
  </div>
  <div class="row">
    <div class="sm-2">sm-2</div>
    <div class="sm-10">sm-10</div>
  </div>
  <div class="row">
    <div class="sm-1">sm-1</div>
    <div class="sm-11">sm-11</div>
  </div>
  <div class="row">
    <div class="sm-12">sm-12</div>
  </div>
  <div class="row">
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
    <div class="sm-1">sm-1</div>
  </div>
  <div class="row">
    <div class="sm-2">sm-2</div>
    <div class="sm-2">sm-2</div>
    <div class="sm-2">sm-2</div>
    <div class="sm-2">sm-2</div>
    <div class="sm-2">sm-2</div>
    <div class="sm-2">sm-2</div>
  </div>
  <div class="row">
    <div class="sm-3">sm-3</div>
    <div class="sm-3">sm-3</div>
    <div class="sm-3">sm-3</div>
    <div class="sm-3">sm-3</div>
  </div>
  <div class="row">
    <div class="sm-4">sm-4</div>
    <div class="sm-4">sm-4</div>
    <div class="sm-4">sm-4</div>
  </div>
  <div class="row">
    <div class="sm-5">sm-5</div>
    <div class="sm-7">sm-7</div>
  </div>
  <div class="row">
    <div class="sm-6">sm-6</div>
    <div class="sm-6">sm-6</div>
  </div>
  <div class="row">
    <div class="sm-7">sm-7</div>
    <div class="sm-5">sm-5</div>
  </div>
  <div class="row">
    <div class="sm-8">sm-8</div>
    <div class="sm-4">sm-4</div>
  </div>
  <div class="row">
    <div class="sm-9">sm-9</div>
    <div class="sm-3">sm-3</div>
  </div>
  <div class="row">
    <div class="sm-10">sm-10</div>
    <div class="sm-2">sm-2</div>
  </div>
  <div class="row">
    <div class="sm-11">sm-11</div>
    <div class="sm-1">sm-1</div>
  </div>
  <div class="row">
    <div class="sm-12">sm-12</div>
  </div> 
</div>