I spent a few days on and off trying to decide the best way to achieve a particular website layout. Should I use CSS Grid, or Flexbox? Some combination?
The main challenge was dealing with the “footer” content, which was supposed to show up in at the bottom of the layout on mobile, but move up to the left “sidebar” on large screens.
Here’s what the layout was supposed to look like:
I was focused on the source-order stuff, so CSS Grid seemed like it’d handle this best. I got the base rows/columns in place, but realized pretty quickly that with my content/markup the “footer” content was going to be pushed down to the second “row” of content (with the side and primary content taking up the first row).
What I wanted was more of a “masonry” layout, where the footer flowed right up under the sidebar content. Now, I know that this can be achieved with a tiny bit of javascript*, or by showing/hiding content based on screen size… But in general, I want to stay mobile-first with my content output, and to avoid using javascript for layout workarounds/shortcuts.
So, with that in mind (and just for some fun/additional exploration), I next tried for a flexbox-based approach, where I used flex-direction: column; to flow the content in column-to-column… And it was working for the most part(!), until I started filling in more of my “primary” content… Since flex-direction: column; requires a set height to flow the content the way I wanted, it was going to require some faked/fudged container heights, or JS to make it stable. (Again, all figure-out-able, but seemed overly complex.)
So/finally, I reached for my old friend, the float. And it just worked! (Of course.) 😅 When I floated my side and footer content left, and my primary content right the layout did exactly what I wanted.
What’s interesting to me now is that it’s still hard for me to believe this is the “right” layout choice! Using floats for layout has fallen so far out of practice**, and Grid and Flex have come so far that it feels backward to use floats so front-and-center in a layout.
But (I guess?) it goes to show that sometimes these old techniques still have their place in modern frontend development. 🤷♂️
*It should be noted that Masonry is coming to CSS Grid, but it’s not here yet. And won’t be fully supported for a while – so I think I’ll have to ship my floats as at least a fallback for the foreseeable future.
**I’m definitely feeling like I’m missing something here (imposter syndrome) but with the finished layout sitting in front of me it’s time to move on. 😃