Basic grid

grid.css

/******************************************************************************/
/***************** Global resets **********************************************/
/******************************************************************************/

/* Default to no padding and margin
   Remove padding behaviour on widths */
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


/******************************************************************************/
/***************** Row styles *************************************************/
/******************************************************************************/

/* Clearfix - standardised hack to deal with nested floats not
   affecting height of parent */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/******************************************************************************/
/***************** Column styles **********************************************/
/******************************************************************************/

/* Set default properties on all ".col-" */
[class*='col-'] {
  float: left;
  padding: 10px;
  /*border: 1px dotted green;*/
}

/* Float last ".col-" to the right */
[class*='col-']:last-of-type {
  padding-right: 10px;
  float: right;
}

/* Styles for direct children of '.col-'s */
[class*='col-'] > div {
  background-color: #CCC;
}

/* Specific column widths */
.col-1  {width: 100%;}
.col-2  {width: 50%;}
.col-3  {width: 33.33%;}
.col-4  {width: 25%;}
.col-5  {width: 20%;}
.col-6  {width: 16.6666666667%;}
.col-7  {width: 14.2857142857%;}
.col-8  {width: 12.5%;}
.col-9  {width: 11.1111111111%;}
.col-10 {width: 10%;}
.col-11 {width: 9.09090909091%;}
.col-12 {width: 8.33%;}


/******************************************************************************/
/***************** Responsive styles ******************************************/
/******************************************************************************/