At the start of this year, CodePen came out with its Most Hearted of 2017 list and I was excited to see that my very first grid experiment made the list at #23. Feeling inspired again, I added a new grid to the series over the weekend: the Phoenicia Diner menu.

The Phoenicia Diner in New York’s Catskill Mountains has an especially gorgeous menu and I took one with me the last time I was there, the same day I accepted my first job in San Francisco and officially started packing for California. It’s been hanging on the wall in my kitchen ever since.

Phoenicia Diner Menu
Phoenicia Diner Menu

For this experiment, I took a stab at defining the grid with grid-template-areas, which turned out to be an very helpful way to organize the menu items and better visualize how things would move around. Other than the outer columns of ads, which I ignored to keep everything else at a readable text size, I was able to get pretty close to the original.

Print menu vs. recreation in CSS
Print menu vs. recreation in CSS

Here’s the final result on CodePen.