CodePen

HTML

            
              <div class="page-wrap">

<!-- 50%-50% grid -->
<div class="grid">
  <div class="col col-1-2">
    <h2>Headline</h2>
    <p>Ducimus quidem numquam natus nihil vero magnam amet cum sed repellendus possimus nisi neque deserunt illo fuga excepturi quas aliquam recusandae praesentium reprehenderit tempora doloremque porro assumenda molestias! Quibusdam ea?</p>
  </div>
  <div class="col col-1-2">
    <h2>Headline</h2>
    <p>Ducimus quidem numquam natus nihil vero magnam amet cum sed repellendus possimus nisi neque deserunt illo fuga excepturi quas aliquam recusandae praesentium reprehenderit tempora doloremque porro assumenda molestias! Quibusdam ea?</p>
  </div>
</div>
  
  
<!-- nested grid -->
<div class="grid">
  <div class="col col-1-2">
    <h2>Headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor suscipit dicta aliquam laudantium alias facilis veritatis magnam provident. Earum saepe impedit quas delectus sint assumenda itaque ab officia odit magnam!</p>
    <div class="grid">
      <div class="col col-1-3">
        <h2>Headline</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A vel at id obcaecati quae corporis molestiae similique est atque illo sit asperiores magnam eligendi rem ullam quaerat doloremque autem neque.</p>
      </div>
      <div class="col col-2-3">
        <h2>Headline</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A vel at id obcaecati quae corporis molestiae similique est atque illo sit asperiores magnam eligendi rem ullam quaerat doloremque autem neque.</p>
      </div>
    </div>
  </div>
  <div class="col col-1-2">
    <h2>Headline</h2>
    <p>Omnis temporibus consequatur explicabo illum vitae dolorum obcaecati quod dolor tenetur fugit voluptatibus odio voluptate id maiores a assumenda cum nostrum nisi reprehenderit earum et vero enim esse possimus dolores!</p>
    <p>Omnis temporibus consequatur explicabo illum vitae dolorum obcaecati quod dolor tenetur fugit voluptatibus odio voluptate id maiores a assumenda cum nostrum nisi reprehenderit earum et vero enim esse possimus dolores!Omnis temporibus consequatur explicabo illum vitae dolorum obcaecati quod dolor tenetur fugit voluptatibus odio voluptate id maiores a assumenda cum nostrum nisi reprehenderit earum et vero enim esse possimus dolores! simus dolores!
    </p>
    <p>Omnis temporibus consequatur explicabo illum vitae dolorum obcaecati quod dolor tenetur fugit voluptatibus odio voluptate id maiores a assumenda cum nostrum nisi reprehenderit ea</p>
  </div>
</div>

</div>
            
          
!
via HTML Inspector

CSS

            
              /**
 *  Micro Clearfix by Nicolas Gallagher
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

/**
 * base styles
 */
*, *:after, *:before {
  @include box-sizing(border-box);
}
body {
  background: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png') 0 0 repeat;
}
.page-wrap {
  max-width: 600px;
  margin: 0 auto;
  background: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/white_wall2.png') 0 0 repeat;
  padding:20px;
}

/**
 * grid styles
 */
$gutter: 20px;

.grid {
  @extend .clearfix;
  margin-left: -$gutter;
}
.col {
  float: left;
  padding-left: $gutter;
}
.col-1-2 {
  width: 50%;
}
.col-1-3 {
  width: 33.333333333%;
}
.col-2-3 {
  width: 66.666666666%;
}
.col-1-4 {
  width: 25%;
}
.col-3-4 {
  width: 75%;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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