Well, shit, I still haven’t learned flexbox. Better get on that, so then I can move on to the next thing.
Flexbox and Grid don’t compete with each other, they each have different use cases. Flexbox currently has better browser support than Grid, so it’s being used to solve some of the problems Grid should be used to solve.
I kind of knew that, but it’s less funny to admit. :)
To make this a slightly more serious comment, it is becoming hard to know where to start. CSS or flexbox or grid? If you don’t already know what they all do, but you want to make a web page that looks like XYZ, how do you choose? Are there tools to help? I mean, FrontPage was a catastrophe, but it generally let you make a web page look the way you wanted. How does one do that today?
The issue is the variety of screen sizes. Frontpage style wysiwyg editing breaks down badly when there’s no canonical size to render the page at.
I wonder if the web page model is all wrong. Maybe regardless of physical width, the browser should render everything “one page wide”. Mobile safari kinda does this, and you can fake it with some media queries. compare with OpenGL, where the screen is always 2.0 wide by default. Or PDF, which I can zoom in and out on, but doesn’t reflow every time I resize the window. Reflowing content seems like a cool idea in theory, but in practice do we fight it more often than not? (No idea, just my 30 seconds hot take.)
Not reflowing the page would definitely be easier for us as developers, the issue with the PDF idea though is that it’s usually hard to navigate, resulting in a “zoom in, pan, zoom out, zoom in, pan” behavior. Half the time you have to pan to view the rest of a line of text as well, or put up with a smaller than optimal text size.
As far as having everything one page wide, that’s an interesting idea. It definitely works for things like blogs, but when the page layout is more complex reflowing (to me at least) seems to be the only sensible idea. Of course, it could be argued that more complex layouts are the issue.
@innovati may have a take on this as well, element queries may have a simple solution to the problem.
You’ve described how PDFs are rendered.
Attempting to read PDFs is a bit of a disaster on tiny phone screens since you can either zoom out to see a whole line of text at once or zoom in to read the words, but not both.