myStaticGrid.css

/*
The purpose of the container is to set the width of the entire grid. The width of the container is generally 100%, but you might want to set a max-width for larger displays.
*/
.grid-container{
        width: 100%; 
        
    }    

/* --setting border box on all elements inside the grid--
    "Before the 'border-box' box-sizing model, giving percentage-width elements a static padding was a real pain. Luckily, using the 'border-box' model, we can create gutters with ease."
*/
    *{
        box-sizing: border-box; 
    }

/* --our cleafix hack -- 
The purpose of the row element is to keep the columns inside it from overflowing onto other rows. To achieve this, we'll use the clearfix hack to make sure everything inside the row stays inside the row. See: http://j4n.co/blog/Creating-your-own-css-grid-system
*/     
    .row:before, 
    .row:after {
        content:"";
          display: table;
        clear:both;
    }
/* --Column Positioning--
"If our columns are empty however, our floated columns will stack on top of each other. To prevent this, we'll give our columns a min-height of 1px as well as float them."

    --Column Widths--
"To find the width of one column, all we have to do is divide the total number of columns by the width of the container(Window/ViewPort). In our case, the width of the container is 100%, and we want 6 columns, so 100/6 = 16.66, so our base column width is 16.66%."
    --Column Gutters--
Before the 'border-box' box-sizing model, giving percentage-width elements a static padding was a real pain. Luckily, using the 'border-box' model, we can create gutters with ease.
*/
    [class*='col-'] {
/*        float: left; */
        min-height: 1px; 
        width: 16.66%; 
        /*-- our gutter -- */
/*        padding: 12px; */
/*        background-color: #FFDCDC;*/
    }

    .col-1{ width: 16.66%; }
    .col-2{ width: 33.33%; }
    .col-3{ width: 50%;    }
    .col-4{ width: 66.66%; }
    .col-5{ width: 83.33%; }
    .col-6{ width: 100%;   }

    .outline, .outline *{
        outline: 1px solid #F6A1A1; 
    }

    /*-- some extra column content styling --*/