CodePen

HTML

            
              <!-- 
=================================================================
Creating grids without the need to remove margin from first/last divs
================================================================

Created as a response to Chris Coyier's article:
http://css-tricks.com/dont-overthink-it-grids/#comment-187046

Thanks to @csswizardry where I originally saw this done http://csswizardry.com/inuitcss
-->
<div class="container">
	<div class="grids">
		<div class="grid-1"></div>
		<div class="grid-1"></div>
		<div class="grid-1"></div>
		<div class="grid-1"></div>
  	<div class="grid-1"></div>
		<div class="grid-1"></div>
		<div class="grid-1"></div>
		<div class="grid-1"></div>
  	<div class="grid-1"></div>
		<div class="grid-1"></div>
		<div class="grid-1"></div>
		<div class="grid-1"></div>
  	<div class="grid-1"></div>
  	<div class="grid-1"></div>
		<div class="grid-1"></div>
		<div class="grid-1"></div>
		<div class="grid-1"></div>
  	<div class="grid-1"></div>
		<div class="grid-1"></div>
		<div class="grid-1"></div>
		<div class="grid-1"></div>
	</div>
</div>
            
          
!

CSS

            
              .container {
	max-width: 1080px;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
}
.grids {
  position: relative;
  margin-left: -20px;
}
.grid-1 {
	float: left;
  width: 100px;
  height: 100px;
  margin-left: 20px;
  margin-bottom: 20px;
  background: red;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................