Where is the best place to find up-to-date information on stuff like layouts, and how to manage crossbrowser/accessibility etc? It's a minefield when trying to self-learn these things as it's hard to tell when info is wrong or bad practice, outdated, etc.
For example - is this CSS grid-generation/layout current best-practice for building the base, foundational layer for a simple static website? Say, with three columns, one centered and wider with content, the others narrow and empty - serving as margins?
And how would one arrive there, as a solution? Searching online turns up an infinity of options such that it's difficult if not impossible to figure out how to do things in if not maybe "the" right or best way, at least "a" right way.
I’ve always used “flex” layout for this. I’m not sure what is considered normal.
There’s no normal, but a good rule of thumb that has worked for me is: use flex for one-dimensional layouts, and grids for two-dimensional layouts.
Grid lays out the structural layout, while Flex lays out the content ordering and positioning.
Grid has been around for a while now, together with flex it’s the way to go to start building layouts. But like everything it requires practice to get the nuances down and learn about the pitfalls. You won’t experience many cross browser issues these days with either of them. And in terms of accessibility you mostly need to consider that visual order does not necessarily match tab order. Especially for grid where you can arbitrarily place elements in the grid.
An older resource for learning grid would be https://youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3Ing.... 6 years old but grid itself has gone mostly unchanged. https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com/ Is a good way to introduce yourself with the concepts of flexbox.
And this one is for the grid https://cssgridgarden.com/
Anything that works is fine. 3 grid columns would work, flexbox would work too, but normally one would use margins. Something like this.
https://jsfiddle.net/gaby_de_wilde/5muq1tag/
I forget why I'm not using a single margin:auto, probably some weird edge case I didn't want to see ever again.
You wouldn't want to use a single `margin: auto`, because that sets the top and bottom margins to `auto` as well. For example if the parent container is flex, you'd then end up with a container that is centered vertically as well, which is not what you wanted. What you're probably looking for is `margin: 0 auto`.
MDN has complete pages on all features, including their compatibility, and decent introductions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
Thanks all, your responses have been incredibly helpful.
In summary (besides the layout-specific stuff which was great) - between the MDN documentation for learning and reference:
https://developer.mozilla.org/en-US/docs/Web
And, for checking compatiblity and common practice:
https://caniuse.com
A n00b like me can get a decent handle on current best practice and standards for web dev. Feel levelled-up - much appreciated!
Caniuse (https://caniuse.com/) aggregates data from MDN with their own data and has reasonably good search. I see browser and standards people linking to it from time-to-time.