CodePen Embed - Grid in CodyFrame v4

<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>

body {
	padding: var(--space-md);
}

li {
	height: 60px;
  border-radius: var(--radius-md);
}

li:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11), :nth-child(12)) {
  background-color: var(--color-primary-lighter);
}

li:is(:nth-child(13), :nth-child(14), :nth-child(15), :nth-child(16), :nth-child(17), :nth-child(18)) {
  background-color: var(--color-primary-light);
}

li:is(:nth-child(19), :nth-child(20), :nth-child(21), :nth-child(22)) {
  background-color: var(--color-primary);
}

li:is(:nth-child(23), :nth-child(24)) {
  background-color: var(--color-primary-dark);
}

li:last-child {
  background-color: var(--color-primary-darker);
}

This Pen is owned by CodyHouse on CodePen.

See more by @codyhouse on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.