ApocalyptiCSS Grid Puzzles

Instructions

• 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.

Scoring

• 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