<css-doodle>
  :doodle {
    @grid: 5x8 / 100% 100vh;
  }
  :after {
    content: "@index()"
  }
  @even {
    background: #f36;
  }
  @odd {
    background: #60569e;
  }
  margin: .5rem;
  color: #fff;
</css-doodle>
body {
  width: 100vw;
  height: 100vh;
  background: #0a0c27;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/css-doodle/0.2.3/css-doodle.min.js