3 ms·

No. It's finally getting to be reasonable. The hackarounds are being displaced in droves now. Ever since CSS grid became a thing, I dumpstered all of the 3rd p

No. It's finally getting to be reasonable. The hackarounds are being displaced in droves now. Ever since CSS grid became a thing, I dumpstered all of the 3rd party web framework stuff I had been using. Placing elements in the right parts of the viewport (across all target devices) has always been 95% of the reason I consumed 3rd party libraries.

politician 4y ago
Yes, but consider that the broader web is littered with answers to questions predicated on old misunderstandings of CSS. How long will it take for outdated answers on Stack Overflow, Quora, and the SEO farms that rehash Q&A or use AI-generated text to drop from the search rankings? The information environment is absolutely saturated with pollution from outdated answers to outdated questions. So while CSS might be getting to be reasonable, good luck to the random newbie trying to get things to work.
jancsika 4y ago
What's the best reference and tutorial for modern CSS grid compatible across the standard browsers?
- bob1029 4y ago
  Maybe start with MDN? https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou... https://developer.mozilla.org/en-US/docs/Web/CSS/grid https://developer.mozilla.org/en-US/docs/Web/CSS/grid
- blueslurpee 4y ago
  In addition to the sibling you might like: https://cssgridgarden.com/ https://cssgridgarden.com/
- alwillis 4y ago
  https://gridbyexample.com https://gridbyexample.com
- chiefalchemist 4y ago
  Wes Bos has a freebie https://cssgrid.io/ https://cssgrid.io/ CSS Tricks also has https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
- petepete 4y ago
  I found watching Kevin Powell's intro on YouTube really helpful. I already had a basic understanding of grid before watching it, but this helped me make sense of the snippets I'd pieced together in my brain over the last couple of years. https://www.youtube.com/watch?v=rg7Fvvl3taU https://www.youtube.com/watch?v=rg7Fvvl3taU
  - quechimba 4y ago
    His channel is really good, I've learned a lot
- mumumu 4y ago
  The official spec is quite good. See csswg
ericmcer 4y ago
Do you find element placement to be a one and done solution in regards to using grid, flex or table? Or do each have their own use cases? I tend to default to flex for most things because I am very comfortable with it. I guess I find keeping all the css properties in my head for all the different placement solutions cumbersome, flex and especially grid have a huge amount of functionality and custom properties, and I have been achieving everything fine using flex and a table when I need a literal table of data.
- bob1029 4y ago
  The general rule is that grid is for 2d layout and flex is for 1d layout. I almost always combine the two by way of a nested hierarchy of elements. Grid is used for the strategic layout, and then within each area I may have flex (or more grid) as appropriate. As for a "literal table of data", I still use table elements for this exact purpose. I do not use tables for layout anymore, unless its for HTML email.
- nathias 4y ago
  flex everything, it behaves much smoother
  - serpix 4y ago
    Grid everything, it has everything flex has and mixing the two makes one want to rage quit.
  - swagasaurus-rex 4y ago
    I've struggled with children sizing in flex. Children take up more space depending on their content. If the content overflows, flex doesn't handle that well either. Grid seems to handle this better when you specify grid-template-column. Anybody know a good flex-specific solution?
    - mumumu 4y ago
      Maybe this: https://drafts.csswg.org/css-rhythm/ https://drafts.csswg.org/css-rhythm/ The searchable keyword for that is "responsive". Using length units related to viewport size on max-widht may help.
wnevets 4y ago
> Ever since CSS grid became a thing, I find myself having to relearn Grid every time I try to use. It actually reminds me a lot of RegEx. Super powerful and helpful but nothing about it sticks in memory.
- mumumu 4y ago
  Me too. But nowadays you can define them with with something like a ascii table. Also, check "massonary". There are so many cool features in css being released today that soon that banner "Best viewed on Netscape 3 on 800*600 resolution" may be common in some niche design sites. But more likely as "Best viewed on Google Canary xxx, on flip screen devices with 10 bit depth colorspace". By the way, did you know there is a css spec for rounded screen devices?
- samuria 4y ago
  I have visited this page so many times. https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/

politician 4y ago

Yes, but consider that the broader web is littered with answers to questions predicated on old misunderstandings of CSS. How long will it take for outdated answers on Stack Overflow, Quora, and the SEO farms that rehash Q&A or use AI-generated text to drop from the search rankings? The information environment is absolutely saturated with pollution from outdated answers to outdated questions. So while CSS might be getting to be reasonable, good luck to the random newbie trying to get things to work.

jancsika 4y ago

What's the best reference and tutorial for modern CSS grid compatible across the standard browsers?

bob1029 4y ago
Maybe start with MDN? https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou... https://developer.mozilla.org/en-US/docs/Web/CSS/grid https://developer.mozilla.org/en-US/docs/Web/CSS/grid
blueslurpee 4y ago
In addition to the sibling you might like: https://cssgridgarden.com/ https://cssgridgarden.com/
alwillis 4y ago
https://gridbyexample.com https://gridbyexample.com
chiefalchemist 4y ago
Wes Bos has a freebie https://cssgrid.io/ https://cssgrid.io/ CSS Tricks also has https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
petepete 4y ago
I found watching Kevin Powell's intro on YouTube really helpful. I already had a basic understanding of grid before watching it, but this helped me make sense of the snippets I'd pieced together in my brain over the last couple of years. https://www.youtube.com/watch?v=rg7Fvvl3taU https://www.youtube.com/watch?v=rg7Fvvl3taU
- quechimba 4y ago
  His channel is really good, I've learned a lot
mumumu 4y ago
The official spec is quite good. See csswg

ericmcer 4y ago

Do you find element placement to be a one and done solution in regards to using grid, flex or table? Or do each have their own use cases? I tend to default to flex for most things because I am very comfortable with it. I guess I find keeping all the css properties in my head for all the different placement solutions cumbersome, flex and especially grid have a huge amount of functionality and custom properties, and I have been achieving everything fine using flex and a table when I need a literal table of data.

bob1029 4y ago
The general rule is that grid is for 2d layout and flex is for 1d layout. I almost always combine the two by way of a nested hierarchy of elements. Grid is used for the strategic layout, and then within each area I may have flex (or more grid) as appropriate. As for a "literal table of data", I still use table elements for this exact purpose. I do not use tables for layout anymore, unless its for HTML email.
nathias 4y ago
flex everything, it behaves much smoother
- serpix 4y ago
  Grid everything, it has everything flex has and mixing the two makes one want to rage quit.
- swagasaurus-rex 4y ago
  I've struggled with children sizing in flex. Children take up more space depending on their content. If the content overflows, flex doesn't handle that well either. Grid seems to handle this better when you specify grid-template-column. Anybody know a good flex-specific solution?
  - mumumu 4y ago
    Maybe this: https://drafts.csswg.org/css-rhythm/ https://drafts.csswg.org/css-rhythm/ The searchable keyword for that is "responsive". Using length units related to viewport size on max-widht may help.

wnevets 4y ago

> Ever since CSS grid became a thing, I find myself having to relearn Grid every time I try to use. It actually reminds me a lot of RegEx. Super powerful and helpful but nothing about it sticks in memory.

mumumu 4y ago
Me too. But nowadays you can define them with with something like a ascii table. Also, check "massonary". There are so many cool features in css being released today that soon that banner "Best viewed on Netscape 3 on 800*600 resolution" may be common in some niche design sites. But more likely as "Best viewed on Google Canary xxx, on flip screen devices with 10 bit depth colorspace". By the way, did you know there is a css spec for rounded screen devices?
samuria 4y ago
I have visited this page so many times. https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/