Basic Grid System

content.txt

Start Bootstrap
--------------------
Home About Services Contact 
--------------------
One Page Wonder
Will Rock Your Socks Off
-------------------
For those about to rock...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis ex dui, dictum eleifend purus rhoncus efficitur. Donec ornare ut massa eu euismod. Nunc sit amet faucibus justo, a gravida magna. Etiam risus lectus, sollicitudin dapibus faucibus ac, fermentum ac odio. Nullam a neque mattis, pellentesque sapien quis, blandit augue. Maecenas lectus leo, lobortis in est ut, suscipit semper risus. Fusce vitae quam pharetra, vulputate quam sed, facilisis nisl.
IMG Rock 1
-------------------
IMG Rock 3
We Salute You!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis ex dui, dictum eleifend purus rhoncus efficitur. Donec ornare ut massa eu euismod. Nunc sit amet faucibus justo, a gravida magna. Etiam risus lectus, sollicitudin dapibus faucibus ac, fermentum ac odio. Nullam a neque mattis, pellentesque sapien quis, blandit augue. Maecenas lectus leo, lobortis in est ut, suscipit semper risus. Fusce vitae quam pharetra, vulputate quam sed, facilisis nisl.
-------------------
Let there be rock!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis ex dui, dictum eleifend purus rhoncus efficitur. Donec ornare ut massa eu euismod. Nunc sit amet faucibus justo, a gravida magna. Etiam risus lectus, sollicitudin dapibus faucibus ac, fermentum ac odio. Nullam a neque mattis, pellentesque sapien quis, blandit augue. Maecenas lectus leo, lobortis in est ut, suscipit semper risus. Fusce vitae quam pharetra, vulputate quam sed, facilisis nisl.
IMG Rock 2
-------------------
Copyright© Your Website 2017

grid.css

/**
Basic Grid System as seen in:
https://www.youtube.com/watch?v=uUGHF0dM6GA

<div class="container">
  <div class="row">
    <div class="col-6>Content Left</div>
    <div class="col-6">Content Right</div>
  </div>
</div>
**/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
}

.container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/** Hack de clearfix **/
.row::after, .row::before {
    content:"";
    display:table;
    clear: both;
}

[class *='col-'] {
    float: left;
    min-height: 7px;
    /**gutters**/
    padding: 12px;
}

/** 100/12*columnas **/
.col-1{ width:8.33%; }
.col-2{ width:16.66%; }
.col-3{ width:25%; }
.col-4{ width:33.33%; }
.col-5{ width:41.66%; }
.col-6{ width:50%; }
.col-7{ width:58.33%; }
.col-8{ width:66.66%; }
.col-9{ width:75%; }
.col-10{ width:83.33%; }
.col-11{ width:91.66%; }
.col-12{ width:100%; }

/** Primer Breakpoint de bootstrap **/
@media all and (max-width:450px){
    [class *='col-'] {
       width: 100%;
    }
}
/** End of Grid System **/