/* Give container div ".grid" class to set a max-width for the grid */
.grid {
  max-width: 900px;
  margin: 0 auto;
  clear:both;
}

/* Use ".col-3" class for 3 columns max
Use ".col-4" class for 4 columns max */
.col-3,
.col-4 {
  width: 90%;
  margin: 1em auto;
/*   "border-box" allows the grid to work when divs have borders */
  box-sizing: border-box;
}

.col-2 {
  width: 45%;
  margin: 1em auto;
/*   "border-box" allows the grid to work when divs have borders */
  box-sizing: border-box;
}

@media (min-width: 480px) {
	.col-5,
  .col-6 {
    width: 26%;
    float: left;
    margin: 2%;
  }
  .col-3,
  .col-4 {
    width: 46%;
    float: left;
    margin: 2%;
  }
}

@media (min-width: 768px) {
  .col-3,
  .col-4 {
    width: 30%;
    margin: 1.65%;
  }
}


/* Not needed for 3 column max grid */
@media (min-width: 992px) {
	.col-2 
  {
    width: 42%;
    float: left;
    margin: 2%;
  }
	
	
  .col-4 {
    width: 23%;
    margin: 1%;
  }
}

/* The code below is just for example use in this Pen to make the divs show up. */
.a1 {
 
  height: 5em;
}

.a2 {
 
  height: 5em;
}

.a3 {
  
  height: 5em;
}

.a4 {
 
  height: 5em;
}

.a5 {
 
  height: 5em;
}

.a6 {
 
  height: 5em;
}

.a7 {
 
  height: 5em;
}

.a8 {
 
  height: 5em;
}

.a9 {
 
  height: 5em;
}

.a10 {
 
  height: 5em;
}

.a11 {
  background-color: #888;
  height: 5em;
}

.a12 {
  background-color: #BBB;
  height: 5em;
}