<ul class="grid gap-xs">
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-1"></li>
	<li class="col-2"></li>
	<li class="col-2"></li>
	<li class="col-2"></li>
	<li class="col-2"></li>
	<li class="col-2"></li>
	<li class="col-2"></li>
	<li class="col-3"></li>
	<li class="col-3"></li>
	<li class="col-3"></li>
	<li class="col-3"></li>
	<li class="col-6"></li>
	<li class="col-6"></li>
	<li></li>
</ul>
// 👉 https://codyhouse.co/ds/docs/framework/grid-layout
body {
	padding: var(--space-md);
}

li {
	background-color: var(--color-primary);
	height: 60px;
}
View Compiled

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.