4 ms·

Using CSS Grid where appropriate (revisited)

24 points by gk1 8y ago

ericand 8y ago
Is CSS grid an alternative to flexbox?
- purple-dragon 8y ago
  No, but also yes... in the way that a table or div elements and css styles are also alternatives to flexbox.
- gramstrong 8y ago
  It shouldn't be, AFAIK they should be used together. Use CSS grid for general layout of multiple elements on a page or area. Use flexbox to style something that suits a row or column. When you find yourself nesting flexboxes, switch to CSS grid would be my advice.
- sureaboutthis 8y ago
  No. Flexbox works in only one direction at a time while grid is designed for whole areas.
RobertRoberts 8y ago
CSS grid is the single most valuable addition to layout on the web in the past 20 years. Flexbox was a stop-gap for layout, but because adoption was so slow, it couldn't replace floating and other silliness before grid took hold. (thank you evergreen browsers) But, grid is nearly useless in a very few circumstances, mainly when you don't know how many items are going to be in a particular space. Grid has a flexibility for dimension flow and positioning, but rigid in the number of columns, rows and areas. (I know about auto-fit/auto-fill, but it's really finicky with dimensions and unknown quantities compared to just using flexbox) Next comes sub-grids... I hope it's built as well as grid is. Love the control and consistent output from grid. The conclusion of this article was just odd though.
- deltron3030 8y ago
  >But, grid is nearly useless in a very few circumstances, mainly when you don't know how many items are going to be in a particular space. Have you used implicit rows/columns? You can specify new rows or columns for x new items, the rows/columns are then added automatically for new elements.
  - RobertRoberts 8y ago
    Yes, and for some things (auto rows) it works great almost always, just not mixing auto columns, auto rows and flexible widths with unknown number of items. I love it for things like multiple column forms with a combination of labels and inputs. This works great when I know I want 4 columns. a max/1fr max/1fr (with auto rows) gives me columns and rows that flow with unknown sized labels and inputs like this: Label | Input Label | Input Label | Input Label | Input Label | Input Label | Input But for some things it just doesn't work very well like when you have a gallery of images. I really, really want this to work, so I haven't given up on grid for this, but making an unknown number of columns based on a variable widths in a multi-screen layout just sucks the life out you. Here's an example article from css-tricks on this topic, but notice you have to either give up flexible number of columns, or flexible widths, you can't have both. If you have both, you have flexbox. :P https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ https://css-tricks.com/auto-sizing-columns-css-grid-auto-fil...
    - deltron3030 8y ago
      I don't think that grid will be able to do that, you'd need some kind of state aware component or function in your compiler/SSG that updates the state of your "mosaic" based on your own settings, so that it can calculate the best possible layout as new items are added to your site and then render/generate it.
      - RobertRoberts 8y ago
        I dont't completely understand your explanation, but flexbox does fill in the few spaces left by grid. (in my experience)
wruza 8y ago
Grid is good at identifying cells’ regular sizes to prevent wrapping or overflow, so it could be used instead of a table for tabular data with no sizing troubles. CSS fit-content and max-content to the rescue. But as usual, bitter part is that grid is restricted to maximum of 1k rows in webkit-based and to 10k rows in firefox browsers and that restriction will be retained, as it seems from discussion. Columns are restricted too, but that is less important. After the limit browsers simply draw all remaining cells at the same coordinates and also mess with cell widths. So, web still cannot show tabular data like desktop toolkits from '90s. Flexbox is also a 20+ years late clone of GtkBox with most terms renamed. It is amazing how web rotates around bells and whistles and ignores basic business needs for decades.

24 points by gk1 8y ago

ericand 8y ago

Is CSS grid an alternative to flexbox?

purple-dragon 8y ago
No, but also yes... in the way that a table or div elements and css styles are also alternatives to flexbox.
gramstrong 8y ago
It shouldn't be, AFAIK they should be used together. Use CSS grid for general layout of multiple elements on a page or area. Use flexbox to style something that suits a row or column. When you find yourself nesting flexboxes, switch to CSS grid would be my advice.
sureaboutthis 8y ago
No. Flexbox works in only one direction at a time while grid is designed for whole areas.

RobertRoberts 8y ago

CSS grid is the single most valuable addition to layout on the web in the past 20 years. Flexbox was a stop-gap for layout, but because adoption was so slow, it couldn't replace floating and other silliness before grid took hold. (thank you evergreen browsers) But, grid is nearly useless in a very few circumstances, mainly when you don't know how many items are going to be in a particular space. Grid has a flexibility for dimension flow and positioning, but rigid in the number of columns, rows and areas. (I know about auto-fit/auto-fill, but it's really finicky with dimensions and unknown quantities compared to just using flexbox) Next comes sub-grids... I hope it's built as well as grid is. Love the control and consistent output from grid. The conclusion of this article was just odd though.

deltron3030 8y ago
>But, grid is nearly useless in a very few circumstances, mainly when you don't know how many items are going to be in a particular space. Have you used implicit rows/columns? You can specify new rows or columns for x new items, the rows/columns are then added automatically for new elements.
- RobertRoberts 8y ago
  Yes, and for some things (auto rows) it works great almost always, just not mixing auto columns, auto rows and flexible widths with unknown number of items. I love it for things like multiple column forms with a combination of labels and inputs. This works great when I know I want 4 columns. a max/1fr max/1fr (with auto rows) gives me columns and rows that flow with unknown sized labels and inputs like this: Label | Input Label | Input Label | Input Label | Input Label | Input Label | Input But for some things it just doesn't work very well like when you have a gallery of images. I really, really want this to work, so I haven't given up on grid for this, but making an unknown number of columns based on a variable widths in a multi-screen layout just sucks the life out you. Here's an example article from css-tricks on this topic, but notice you have to either give up flexible number of columns, or flexible widths, you can't have both. If you have both, you have flexbox. :P https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ https://css-tricks.com/auto-sizing-columns-css-grid-auto-fil...
  - deltron3030 8y ago
    I don't think that grid will be able to do that, you'd need some kind of state aware component or function in your compiler/SSG that updates the state of your "mosaic" based on your own settings, so that it can calculate the best possible layout as new items are added to your site and then render/generate it.
    - RobertRoberts 8y ago
      I dont't completely understand your explanation, but flexbox does fill in the few spaces left by grid. (in my experience)

wruza 8y ago

Grid is good at identifying cells’ regular sizes to prevent wrapping or overflow, so it could be used instead of a table for tabular data with no sizing troubles. CSS fit-content and max-content to the rescue. But as usual, bitter part is that grid is restricted to maximum of 1k rows in webkit-based and to 10k rows in firefox browsers and that restriction will be retained, as it seems from discussion. Columns are restricted too, but that is less important. After the limit browsers simply draw all remaining cells at the same coordinates and also mess with cell widths. So, web still cannot show tabular data like desktop toolkits from '90s. Flexbox is also a 20+ years late clone of GtkBox with most terms renamed. It is amazing how web rotates around bells and whistles and ignores basic business needs for decades.