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.
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.
Here’s the final result on CodePen.