The Beauty of FizzBuzz in CSS

In this CSS implementation of FizzBuzz, we can generate beautiful patterns with math!

A pleasing repetetive pattern of boxes

FizzBuzz is a game taught to children to help them practice division. It is also an introductory problem in computer science to teach iteration and logic. Sometimes, FizzBuzz is asked in developer job interviews, too.

Below is a CodePen I created recently that is an implementation of FizzBuzz in CSS, with some adjustments for the purposes of relevance and beauty, specifically changing background colors instead of printing numbers and text. Resize the window to see the patterns change. It’s quite pleasing!

See the Pen The beauty of FizzBuzz by Lara Schenck (@laras126) on CodePen.

The FizzBuzz problem goes as follows:

Write a program that prints the numbers from 1 to 100 and for multiples of ‘3’ print “Fizz” instead of the number and for the multiples of ‘5’ print “Buzz”. For multiples of 3 and 5 print “FizzBuzz”.

If you are ever asked FizzBuzz in an interview for a front-end position, consider programming it in CSS instead of JavaScript!