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

// 1 through 36
for i in 1..36
  div:nth-child({i})::after
    content 'i == ' + i
    background-color hsl(i * 10, 50%, 50%)


// styles...
body {
  align-items: stretch;
  align-content: stretch;
  display: flex;
  flex-wrap: wrap;
  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;
  }
}