nth-children builder

by WebComponents

HTML

<script src="https://nth-children.github.io/element.js?cachebust=1"></script>

<style>
  /* make UI fit in Dev.to post */
  nth-children {
    &::part(h1) {
      display: none;
    }
    &::part(examples) {
      font-size: 60%;
    }
    &::part(edit) {
      zoom: 1;
    }
    &::part(grid-container) {
      max-width: 800px;
    }
    &::part(grid-cell) {
      font-size: 30px;
    }
  }
</style>

<nth-children cellcount="20" smile="🤪" columns="5"></nth-children>