tips

Tip 023 - A Downside of CSS Grid

CSS Grid is an absolute lifesaver and I love it to pieces and I might even like Bloomberg for providing the work and funding to get it made.

It does not magically fix everything.

In this case, I needed a layout where there was a basic grid on the right and some text spanning the entire left side of the grid. This is easy enough to build - declare some columns and some rows, make sure the text goes from the first row line to the last row line, let the rest of the grid arrange itself naturally. Done! Right?

Ah, but that darn mobile view. Curse you, small screens! And so the CSS is refactored - Most stays where it is, but the display: grid; declaration and any relevant styling goes behind a media query for a width of tablet-ish and up. Works fine.

So I suppose there's two tips you can pull from this one - yes, Grid is great, but you still have all the same media sizing considerations, it's not magic - and I approached this project backwards. I should have started with the small screen. I might have even ended up using flexbox, who knows.

 

Have you written a reply to this post? Send me the URL here: