There are two things that designers will throw out quite often – box grids with rows, and repeating background colours.
Sounds easy – but go and try it within the WordPress loop (or any other). It can get ugly quickly, but the solution is actually simple: Modulus. In PHP it’s the % sign.
To see what modulus is all about run this simple page:
This will output a list showing when various modulus calculations will output TRUE so you can check in an
if statement. For example:
$i % 3 == 2: 0 : 1 : 2 : TRUE 3 : 4 : 5 : TRUE 6 : 7 : 8 : TRUE 9 :
Simple example – inserting rows for a grid
Modulus 3 is perfect for creating a 3 column grid (in this case in Bootstrap style) as we can check for when the remainder is 2 which will tell us we are on the 3rd, 6th, 9th etc item. This means we can output the very first and last
<div class="row"> tags with no logic, then just use modulus to insert the inbetween
</div><div class="row"> to end one row and start another where needed:
More complex example – looping background colours
This time we will use modulus 7 to loop over a list of the colours of the rainbow to set a class that will control the background colour of a div:
This illustrates how the modulus number sets the frequency that the loop repeats, and by checking for different remainders you can identify any point in that loop.
If you’ve got a good use of modulus let me know in the comments.