Last Updated: February 25, 2016
· guido

A fluid responsive checkerboard with CSS media queries

A while ago I had to create a fluid responsive checkerboard. Luckily I was allowed to use media queries. I absolutely love nth-child() now.

The code:

// Chekkerboard css

  max-width               : 1000px

    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)
      width               : 33.33%

        background        : lightgrey

@media screen and (min-width: 750px)
      width               : 25%

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

Have a fresh tip? Share with Coderwall community!

Post a tip