CodePen

HTML

            
              <div class="grid">
  <div class="col-1-2">
    <img src="http://placehold.it/500x500" />
  </div>
  <div class="col-1-2">
    <img src="http://placehold.it/500x500" />
  </div>
</div
            
          
!

CSS

            
              * {
  @include box-sizing(border-box);
}

$pad: 35px;

.grid {
  background: white;
  margin: 0 auto $pad auto;
  width: 60%;
  
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

img{
  width: 100%;
  height: auto;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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