4 ms·

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

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.

afloatboat 2y ago
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-ze3IngcdAc2xKG&si=sTz_CvpyhRXuz4Ih 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/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://flexboxfroggy.com/ https://flexboxfroggy.com/ Is a good way to introduce yourself with the concepts of flexbox.
- ffsm8 2y ago
  And this one is for the grid https://cssgridgarden.com/ https://cssgridgarden.com/
- deleted 2y ago
  [deleted]
zadokshi 2y ago
I’ve always used “flex” layout for this. I’m not sure what is considered normal.
- Brajeshwar 2y ago
  Grid lays out the structural layout, while Flex lays out the content ordering and positioning.
- danielvaughn 2y ago
  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.
6510 2y ago
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/ 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.
- Etheryte 2y ago
  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`.
tgv 2y ago
MDN has complete pages on all features, including their compatibility, and decent introductions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout#guides https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
promiseofbeans 2y ago
Caniuse (https://caniuse.com/ 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.
deleted 2y ago
[deleted]
robxorb 2y ago
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 https://developer.mozilla.org/en-US/docs/Web And, for checking compatiblity and common practice: https://caniuse.com 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!

afloatboat 2y ago

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-ze3IngcdAc2xKG&si=sTz_CvpyhRXuz4Ih 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/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://flexboxfroggy.com/ https://flexboxfroggy.com/ Is a good way to introduce yourself with the concepts of flexbox.

ffsm8 2y ago
And this one is for the grid https://cssgridgarden.com/ https://cssgridgarden.com/
deleted 2y ago
[deleted]

zadokshi 2y ago

I’ve always used “flex” layout for this. I’m not sure what is considered normal.

Brajeshwar 2y ago
Grid lays out the structural layout, while Flex lays out the content ordering and positioning.
danielvaughn 2y ago
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.

6510 2y ago

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/ 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.

Etheryte 2y ago
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`.

tgv 2y ago

MDN has complete pages on all features, including their compatibility, and decent introductions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout#guides https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

promiseofbeans 2y ago

Caniuse (https://caniuse.com/ 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.

deleted 2y ago

[deleted]

robxorb 2y ago

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 https://developer.mozilla.org/en-US/docs/Web And, for checking compatiblity and common practice: https://caniuse.com 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!