ApocalyptiCSS Grid Puzzles

Put together these zombie puzzles using CSS Grid.
How to Play


  • Type CSS Grid code into the box on the left to reorder and/or organize the pieces into the image you see at the bottom right.
  • Select the parent element with #puzzle
  • Select individual pieces using #piece with their piece number e.g. #piece1, #piece2, etc.
  • Don't forget to "display: grid;"!
  • Use fr units or percentages for best results.
  • The first ten puzzles must be completed sequentially, but any additional puzzles can be played at any time.
  • Don't be afraid to use your browser's grid tools (Firefox's are particularly great)
  • Already finished all of the puzzles? Play again and lower your score.


  • The fewer selectors/declaration blocks used and the less code you write to solve the puzzle the better your score.
  • We're using golf scores here. For instance, 1.28 is better than 2.37 and a 1.12 is better than both of them.
  • The first number is the number of declaration blocks used. If you have several selectors per declaration block, good for you!
  • The second number is the number of characters used. We give you 8 free characters per declaration block and exclude white space in the calculation so feel free to format your code for readability.

Questions, Comments, Bugs, Suggestions or Snide Remarks?

Contact John at info [at] undead [dot] institute

Hmmmm... it seems we're having trouble contacting the almighty cloud brain know as "teh Internets" in your era. Be a good human slave and turn your connection on and off again won't you?