Elastic responsive SASS / CSS checkerboard scaling from 2 to 4 blocks wide depending on the container width. The `:nth-child()` calculations are the interesting part.

checkerboard.css.sass

// Chekkerboard css

#overview
  max-width               : 1000px

  .item
    width                 : 50%
    background            : white



@media screen and (max-width: 500px)
    &:nth-child(4n+2), &:nth-child(4n+3)
      background          : lightgrey


@media screen and (min-width: 500px) and (max-width: 750px)
  #overview
    .item
      width               : 33.33%

      &:nth-child(2n)
        background        : lightgrey

@media screen and (min-width: 750px)
  #overview
    .item
      width               : 25%

      &:nth-child(8n+2), &:nth-child(8n+4),
      &:nth-child(8n+5), &:nth-child(8n+7)
        background          : lightgrey