CSS Grid Layout
Because Flexbox and Prime Numbers Don’t Get Along
I recently deployed a tiny application to rip apart into several blog posts. You can see the app live on Heroku, and you can read the code (some of which I’m ashamed of) on GitHub.
After I made the decision to start blogging, I had to find something to write about. Instead of writing about any of my unfinished side projects, I decided to start yet another side project specifically for this blog because my brain is erratic.
I wanted to find a balance between stuff I’m familiar with, stuff I’m interested in, and stuff that doesn’t have many educational resources. For me, that Venn Diagram (TIL: there are two ‘n’s in Venn) might include Facebook’s create-react-app, JavaScriptPromise's, and CSS Grid Layout, respectively.
Once I decided what technologies/concepts I wanted to include in my app, I had to think of an idea that uses said technologies/concepts, AKA a solution in search of a problem.
I realized that this app would exist specifically for a blog, and I accepted that it would probably deliver little-to-no real-world value. In retrospect, that wasn’t the best way to motivate myself for a new project.
¯\_(ツ)_/¯
I tried to think of a trivial app that solves a problem, even if it was a negligible, 1st-world problem. And as a person that frequently checks the weather in other cities, I decided that it was annoying that I didn’t know of an app that displayed the current weather and 5-day forecast for multiple cities at the same time. So instead of Googling to see if it already existed, like a reasonable person, I did what many developers do, and immediately began building it.
I started by trying to imagine what it would look like*.
*Full Disclosure: I am a developer, and not a designer.
I imagined looking at my laptop screen, and seeing cards for each city. And then I imagined seeing those same cards stacked on top of each other on my phone and/or tablet screen. And then I scolded myself for being a hypocrite for designing the desktop view first when I claim to be an advocate for mobile-first design.
I started building the basic layout with my go-to layout technology; flexbox.
You know that “If all you have is a hammer, everything looks like a nail” saying? Flexbox was my hammer. It’s not that flexbox was all I had, but more that I was trying to justify all the time I spent playing Flexbox Froggy.
Anyways, it didn’t take long before I hit a common flexbox speed bump; grid layouts.
You can’t turn a flexbox into a responsive grid. — Tupac
I imagine that it is technically possible to achieve a responsive grid layout using flexbox without media queries. But the more I tried, the more it felt like I was trying to force a round peg into a square hole.
Here is a .gif of the problem:
Notice how there are seven cards, and how the last card flexes too much, thus filling the last row.
It worked when I only had one card… or two… or four, six, eight, nine, or ten. But it did not work well with three, five, seven, or eleven. Basically, it didn’t work for prime numbers greater than two.
You can see for yourself on CodePen. And if you get it working, please let me know.
I spent a little more time attempting to get it work. I even made a spreadsheet to calculate how many cards should fit per row for a given screen size, which I then used to calculate a dynamic max-width that would prevent the cards in the last row from over-flexing… And then I remembered that I don’t have access to the exact screen width inside the CSS.
Then I had an even dumber idea:
Maybe I can get the screen width via JavaScript, calculate the max-width in the JavaScript, and set the max-width as an inline style for each card.
Before I stopped to think about the merits of that idea, I already started implementing it.
Unsurprisingly, it didn’t work at all on my first attempt. I realized that it was not automatically recalculating when the browser was resized. So I Googled some solutions for browser resizing, and I found a cool npm package; react-resize-aware.
I read the documentation, imported the package, and wrapped my app with the component that passed the screen size to my code. And it worked… kind of.
The page would load with the initial styles from the CSS. And then the inline styles would kick in after the JavaScript ran, thus causing the cards to instantly change to the correct width. So it technically worked, but it was effectively unusable due to the surprise width change.
By that point, I was confident that I was making everything more difficult than it needed to be. So I deleted all of that code and returned to the drawing board.
And then I had a crazy idea:
Maybe flexbox isn’t the right tool for this job.
I convinced myself that I didn’t just commit heresy, and began reviewing my options. And then I remembered that I completed all the exercises for CSS Grid Garden, but forgot how to use it because I never actually applied it anywhere (because it’s not currently supported by modern Internet Explorer/Edge).
Maybe CSS Grid Layout would work for a responsive grid layout.
So while CSS Grid Layout isn’t a good fit for my job (we support modern Internet Explorer), it was a good fit for what I needed… because side project.
I made a couple earnest attempts to implement it on my own. However, I quickly decided I had wasted enough time on a layout for a side project that was only going to be used for a blog.
I found a StackOverflow question that looked relevant to the problem I was having. And I pretty much copy-pasted the answer into my code, and it worked.
You can view the basic layout on CodePen.
While I’m bummed it took me as long as it did to get a responsive grid layout working, I would rather learn the hard way than not learn at all.
Feel free to leave comments (don’t be a jerk), follow me on Twitter and/or follow me on Instagram.
