<div class="padding-md">
  <div class="grid gap-sm">
    <div class="bg-contrast-low padding-sm col-12 col-6@md">
      <div class="grid gap-sm">
        <div class="bg-contrast-higher padding-sm col">
          <div class="grid gap-sm">
            <div class="bg-primary height-xl col"></div>
            <div class="bg-primary height-xl col"></div>
          </div>
        </div>
        
        <div class="bg-contrast-higher padding-sm col">
          <div class="grid gap-sm">
            <div class="bg-primary height-xl col"></div>
            <div class="bg-primary height-xl col"></div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="bg-contrast-low padding-sm col-12 col-6@md">
      <div class="grid gap-sm">
        <div class="bg-contrast-higher padding-sm col">
          <div class="grid gap-sm">
            <div class="bg-primary height-xl col"></div>
            <div class="bg-primary height-xl col"></div>
          </div>
        </div>
        
        <div class="bg-contrast-higher padding-sm col">
          <div class="grid gap-sm">
            <div class="bg-primary height-xl col"></div>
            <div class="bg-primary height-xl col"></div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="bg-contrast-low padding-sm col-12 col-6@md">
      <div class="grid gap-sm">
        <div class="bg-contrast-higher padding-sm col">
          <div class="grid gap-sm">
            <div class="bg-primary height-xl col"></div>
            <div class="bg-primary height-xl col"></div>
          </div>
        </div>
        
        <div class="bg-contrast-higher padding-sm col">
          <div class="grid gap-sm">
            <div class="bg-primary height-xl col"></div>
            <div class="bg-primary height-xl col"></div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="bg-contrast-low padding-sm col-12 col-6@md">
      <div class="grid gap-sm">
        <div class="bg-contrast-higher padding-sm col">
          <div class="grid gap-sm">
            <div class="bg-primary height-xl col"></div>
            <div class="bg-primary height-xl col"></div>
          </div>
        </div>
        
        <div class="bg-contrast-higher padding-sm col">
          <div class="grid gap-sm">
            <div class="bg-primary height-xl col"></div>
            <div class="bg-primary height-xl col"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
// 🐞 CodyFrame
// 📝 Docs: codyhouse.co/ds/docs/framework/grid-layout
View Compiled

External CSS

  1. https://codepen.io/codyhouse/pen/Wqvpmm
  2. https://unpkg.com/codyhouse-framework/main/assets/css/style.css

External JavaScript

  1. https://unpkg.com/codyhouse-framework/main/assets/js/util.js