<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

// 36 loop iterations
@for $i from 1 through 36 { 
  div:nth-child(#{$i})::after {
    content: "$i == #{$i}";
    // multiply by 10 for larger hue increments
    background: hsl($i * 10, 50%, 50%);
  }
}


// styles...
body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
  height: 100vh;
}

div {
  display: flex;
  flex: 1 0 auto;
  white-space: nowrap;
    
  &::after {
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    padding: 0.5em 1em;
  }
}