4 ms·

How does CSS Grid compare to CSS Flexible Box ("Flexbox") for user interface design? According to W3C: * CSS Grid "defines a two-dimensional grid-based layout

by pdog 9y ago

How does CSS Grid compare to CSS Flexible Box ("Flexbox") for user interface design? According to W3C: * CSS Grid "defines a two-dimensional grid-based layout system, optimized for user interface design."[1] * Flexbox is "a CSS box model optimized for user interface design."[2] It looks like CSS Grid is optimized for two-dimensional layouts, whereas Flexbox is oriented around a single axis. Are there different use cases? Do they solve the same problem in different ways? [1]: https://www.w3.org/TR/css-grid-1/ https://www.w3.org/TR/css-grid-1/ [2]: https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-flexbox-1/

detaro 9y ago
Very simplified, Grid is for defining flexible 2D Grids from various components: you define lines forming a grid, and assign content to grid cells. Flexbox is primarily for layouting things along one axis. It provides some flexibility in the second dimension, and the ability to wrap the axis, but it primarily either organizes a row or a column of things. Grids are also more flexible in where they position things, where Flexbox goes strictly by order and hierarchy in the document.
RubenSandwich 9y ago
I'll give an example of something you can't do with a one-dimensional layout system like Flexbox but can do with Grid Layouts: a staggered grid/one made of nonuniform cells: https://i.stack.imgur.com/QI2ol.png https://i.stack.imgur.com/QI2ol.png. These come up quite a bit. Look at Pinterest, it is all staggered/made of nonuniform cells.
- htormey 9y ago
  That’s interesting, I didn’t know about that. Didn’t Pinterest migrate its web front end to using react which uses flexbox for its layout system? If so, how did they do this?
  - RubenSandwich 9y ago
    React is just a View layer, you can use whatever layout system you want to use with it. I haven't dug into Pinterest's code but I imagine it's most likely a mix of Flexbox and Multi-column layouts: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns.... Edit: See this blog post on how to combine them to achieve the staggered effect: https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8....
    - htormey 9y ago
      Cool, that’s interesting to know. I’m mainly used to using react in the context of react native so I wasn’t aware that mixing and matching like that was a thing.
      - RubenSandwich 9y ago
        Yeah React Native uses Yoga as it's layout engine which only supports Flex box. But for React DOM you get all of CSS, warts and all!
    - deleted 9y ago
      [deleted]

by pdog 9y ago

detaro 9y ago

Very simplified, Grid is for defining flexible 2D Grids from various components: you define lines forming a grid, and assign content to grid cells. Flexbox is primarily for layouting things along one axis. It provides some flexibility in the second dimension, and the ability to wrap the axis, but it primarily either organizes a row or a column of things. Grids are also more flexible in where they position things, where Flexbox goes strictly by order and hierarchy in the document.

RubenSandwich 9y ago

I'll give an example of something you can't do with a one-dimensional layout system like Flexbox but can do with Grid Layouts: a staggered grid/one made of nonuniform cells: https://i.stack.imgur.com/QI2ol.png https://i.stack.imgur.com/QI2ol.png. These come up quite a bit. Look at Pinterest, it is all staggered/made of nonuniform cells.

htormey 9y ago
That’s interesting, I didn’t know about that. Didn’t Pinterest migrate its web front end to using react which uses flexbox for its layout system? If so, how did they do this?
- RubenSandwich 9y ago
  React is just a View layer, you can use whatever layout system you want to use with it. I haven't dug into Pinterest's code but I imagine it's most likely a mix of Flexbox and Multi-column layouts: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns.... Edit: See this blog post on how to combine them to achieve the staggered effect: https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8....
  - htormey 9y ago
    Cool, that’s interesting to know. I’m mainly used to using react in the context of react native so I wasn’t aware that mixing and matching like that was a thing.
    - RubenSandwich 9y ago
      Yeah React Native uses Yoga as it's layout engine which only supports Flex box. But for React DOM you get all of CSS, warts and all!
  - deleted 9y ago
    [deleted]