6 ms·
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 bo
by 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 agoThis 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 agoI agree for the common case, but CSS grid even for one axis can be better, especially for gutter/gap.
- miiiiiike 7y agoIt'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 agoThat'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 agoFirefox supports grid-gap for flex, but I no other browsers do yet. https://caniuse.com/#search=gap https://caniuse.com/#search=gap