Deth

Fitness and everything else

Checking out CSS Grids

For a while now, I have been wanting to convert my CSS, which currently relies on flexbox over to using a CSS grid layout. It looked interesting to me and looked like it would simplify the layout and make things easier to modify.

Flexbox was nice to use, and all but the grid algorithm should give me better control. Hell, I can’t complain at all. I remember the days when flexbox was broken or even used in certain positions. Thanks for nothing, Internet Explorer, for making things that didn’t work.

I don’t know whether the grid layout will work better for me or not, but I like learning new things and breaking things. So far, the grid seems to be a little more intuitive for me. I had hesitated to do it before due to browser support, but I must have misread when it was supported by all major browsers.

While I am messing with my CSS, I am finally doing a long-overdue chore. I am separating the layout from the colors and other non-layout parts. Since I use SCSS, Zola will put it back together for me anyway.

I don’t know if the full switch to CSS grids will work out for me, but the first switch I made certainly made things more intuitive. That was switching my weather colander over to grid instead of flexbox. When you think about it, a colander really is not much more than a grid of cells. At the very least, I will have some fun and learn a few things while doing this experimentation.

So far the best approach for how I want things to be seems to be using a grid for the main layout (header, main and footer.) Inside of those using a flex box for things like the menu and tags seems to be the way to allow those to flow. I will keep looking into other options but for now this is what I think will be best for me.