I finally stopped using floats for my sidebar layouts last month.

Switched to a simple grid-template-areas setup, and it cut my code for a client's blog page in half. What's your go-to method for sidebars now?

3 comments

3 Comments

jade6182mo ago

Grid is great, but Flexbox works better sometimes.

sean_dixon962mo ago

Grid-template-areas was a game changer for me too. I still use Flexbox for smaller bits inside those areas, like a button row, which is where I see @jade618's point. My old float-based sidebar code was a mess of clearfix helpers. It felt like fixing a pipe with duct tape when you finally find the proper wrench.

jamesblack1d ago

Yeah I read somewhere that the main difference is really about flow. Flexbox works in one dimension at a time while Grid handles two. That clicked for me. Float layouts were basically us pretending browsers had a layout system when they really didn't. So many hacks. I still catch myself reaching for floats on old projects out of habit and then I laugh and switch to Grid. The clearfix thing you mentioned is exactly what I mean. That was just us duct taping everything together like you said. Its wild how much cleaner my stylesheets look now without all that extra markup.