4 ms·

Grid and flexbox have different uses and values. I wouldn't give up on grid. There are things it does that Flexbox fails spectacularly at. (absolute layout cont

Grid and flexbox have different uses and values. I wouldn't give up on grid. There are things it does that Flexbox fails spectacularly at. (absolute layout control for one...) But also flexbox does a few things grid simply cannot. So it's good to know both.

The_rationalist 7y ago
Sadly, I haven't been able to find any benchmarck comparing grid vs flexbox, despite layout being a common bottleneck.
- miiiiiike 7y ago
  They have different use cases. The rule of thumb is to use Flexbox if you're laying out content along the X or Y axis and Grid if you need to lay it out over both the X and Y axes.
  - karlshea 7y ago
    This is a very good rule of thumb. Grid is great for the layout of the whole page (header/content/sidebar/footer) or specific gridded containers. Flexbox is great for everything else, and specifically what you said about in one dimension, like form label/input or a repeating set of thumbnails, or justified buttons.
  - The_rationalist 7y ago
    I agree for the common case, but CSS grid even for one axis can be better, especially for gutter/gap.
    - miiiiiike 7y ago
      It's nice to be in a place with CSS where we're talking about all of the good ways to do things rather than telling each other "if you abuse this feature you can accomplish the task in 2 of the major browsers. YMMV."
  - baddox 7y ago
    That's an okay rule of thumb, but I find myself using grid more and more for traditional flexbox applications like a horizontal list of cards that wraps. Little things like grid-gap (flex child margins are a constant source of pain) and auto-fill with minmax [0] make a big difference to me in rapid prototyping. [0] eg: grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    - Vanderson 7y ago
      Firefox supports grid-gap for flex, but I no other browsers do yet. https://caniuse.com/#search=gap https://caniuse.com/#search=gap
- galaxyLogic 7y ago
  It would be nice to find a document showing how to do some examples in both Grid and Flex and compare the amount of markup needed, also pros and cons of each for each example

The_rationalist 7y ago

Sadly, I haven't been able to find any benchmarck comparing grid vs flexbox, despite layout being a common bottleneck.

miiiiiike 7y ago
They have different use cases. The rule of thumb is to use Flexbox if you're laying out content along the X or Y axis and Grid if you need to lay it out over both the X and Y axes.
- karlshea 7y ago
  This is a very good rule of thumb. Grid is great for the layout of the whole page (header/content/sidebar/footer) or specific gridded containers. Flexbox is great for everything else, and specifically what you said about in one dimension, like form label/input or a repeating set of thumbnails, or justified buttons.
- The_rationalist 7y ago
  I agree for the common case, but CSS grid even for one axis can be better, especially for gutter/gap.
  - miiiiiike 7y ago
    It's nice to be in a place with CSS where we're talking about all of the good ways to do things rather than telling each other "if you abuse this feature you can accomplish the task in 2 of the major browsers. YMMV."
- baddox 7y ago
  That's an okay rule of thumb, but I find myself using grid more and more for traditional flexbox applications like a horizontal list of cards that wraps. Little things like grid-gap (flex child margins are a constant source of pain) and auto-fill with minmax [0] make a big difference to me in rapid prototyping. [0] eg: grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  - Vanderson 7y ago
    Firefox supports grid-gap for flex, but I no other browsers do yet. https://caniuse.com/#search=gap https://caniuse.com/#search=gap
galaxyLogic 7y ago
It would be nice to find a document showing how to do some examples in both Grid and Flex and compare the amount of markup needed, also pros and cons of each for each example