Grid Experiment: Patrick Mahomes
April 20, 2020
Ever since I saw Jen Simmons Lab experiments, I have had an interest in playing around with CSS Grid Layout with things that I saw in print or other places. I have created several on Codepen.
Recently I have enjoyed Dan Davies Print to CSS. It has stoked in me more of a desire to play around. My biggest obstacle to playing with some different layouts is just finding inspiration. We don’t subscribe to any magazines at the moment and I really have struggled to find inspiration on Pinterest, which is a source that Dan had suggested to me.
I decided to take inspiration from one of the sources that Dan used in his series. The original inspiration was a new identity for the Barcelona Design Museum by Atlas in 2014. Dan took that and created a tribute to Kobe Bryant.
My Inspiration
My inspiration was Patrick Mahomes. I started working on this 3 weeks after he led to the Chiefs to a come-from-behind victory over the 49ers to win the Super Bowl. I grew up in Kansas City and spent many a Sunday at Arrowhead Stadium in the lean years of the 70’s and 80’s. I was excited that my hometown team finally won another championship so I decided to celebrate that win and celebrate Patrick with this project.
How I Built It
I started with the same 4 column grid for larger screens that Dan had been inspired by in the original work. I also used content placement from the original and Dan’s version. But then I started to make it my own. I chose to add some color to the photo of Patrick Mahomes using masking in Photoshop. I also decided to add the Chief’s logo.
Happy Accidents
One of the fun things about putting something like this together is the happy accidents that occur. For example, on the mobile view, I had forgotten to place the number explicitly on the grid. Grid’s default behavior is to auto-flow content to the first available space, which in this case was at the bottom of the layout. I liked how it looked and decided to keep the number there until a larger tablet width gave me enough real estate to place it higher on the page.
Final Piece of Fun
Finally, I decided to have some fun creating a 9:5 aspect ratio layout for larger screens using the aspect-ratio media query. This allowed me to take advantage of screens that could handle a landscape layout. I had used this media query in a project last year and decided to pull it out of my hat to create an additional layout for my tribute.
