CSS Grid experiments

Learning CSS Grid through traditional graphic design

A few weeks ago, when I started at Credit Karma, my friend Nabil gave me a book about The Intelligent Lifestyle Magazine as a welcome present. It’s an incredible book, full of clever and intricate print design work, and it inspired me to finally take a stab at learning CSS Grid. At the end of last week, I scanned a few layouts with my phone and decided to spend the long weekend trying to recreate the spreads from the book as accurately as I could with CSS.

I started with Jen Simmons’ very helpful Here’s a Super Quick Way to Try out CSS Grid post, which, as promised, walks through a super quick way to try out CSS Grid. After playing around with a few of her CodePen examples, I set to work on the first and easiest layout. For this first experiment, I wasn’t too worried about making it responsive, I just wanted to get familiar with the concepts.

Grid Experiment No. 1

Here’s the final result on CodePen.

In less than an hour, I’d gotten the layout 90% of the way there and spent another hour or so styling the page. While the grid definitely made laying out the content easier, I thought it was probably still doable with Flexbox, so I chose something a bit more complicated for experiment number two.

Grid Experiment No. 2

Here’s the final result on CodePen.

This one definitely would not have been possible without CSS Grid, and it was especially satisfying to get the statistics and the captions to line up in their respective grids and columns just so. Once it was looking good on desktop, I attempted to make the layout responsive and realized I could not have organized the code worse for mobile styling. Whoops. Onto experiment number three.

Grid Experiment No. 3

Here’s the final result on CodePen.

Third time’s the charm: by styling everything for mobile-first, I was able to make this last experiment fully responsive without too much effort. This approach also allowed me to introduce the grid as needed, instead of making an elaborate grid and trying to cram things around unnecessarily for smaller screens.

Now that I have the hang of it, I definitely need to get off my butt and come up with more creative layouts of my own to code.

← PreviousNext →