6 ms·

You make it sound like CSS Grids is a replacement for flexbox. They each solve very different problems, and they complement each other.

acdanger 7y ago
Can you outline what problems each is trying to solve? I end up using each seemingly interchangeably quite often.
- gherkinnn 7y ago
  Flex: one dimension and handling an unknown amount of arbitrarily sized elements in any order Grid: two dimensions and handling a known amount of reasonably sized elements
- jasim 7y ago
  Imagine you take a piece of paper, draw 4 vertical and horizontal lines dividing the page into 16 cells. Now when you place an element in any of these cells with width: 100%, they'll take exactly the width of the grid cell. It can't grow beyond that. You have a lot of flexibility in choosing the width and height of each cell, but they are rigid. In case of Flexbox, we don't specify any fixed lines to which the elements will size. Instead, we say general rules saying elements can grow to as much size is available, or stay at the beginning of the row etc. The layout is determined to a large extend by the elements we place rather than on a fixed set of gridlines.
- irrational 7y ago
  Use CSS Grid for a grid - like a spreadsheet with multiple rows and columns. Use Flexbox for a single row or column. So you might have a 10x10 grid and in the cell in row 3 column 5 you might want to have a bunch of images that are all in a row. Use Flexbox to layout those images.
  - nailer 7y ago
    Personally I can't be bothered and use grid for both. Why have a separate syntax for one dimension?
    - irrational 7y ago
      Here are 10 reasons why. https://stackoverflow.com/questions/55064488/what-are-the-areas-covered-by-flexbox-which-are-difficult-or-impossible-to-achie https://stackoverflow.com/questions/55064488/what-are-the-ar...
      - nailer 7y ago
        Thanks. Reconsidering my position. I think I'll still do div {display: grid }; in my basic styles but be aware of some cases where flex may be more appropriate.
- Vanderson 7y ago
  Flex: 1. For unknown number of items in one direction. (toolbar of buttons works better in flex) 2. Row-wrapping items. (ie, the unknown number of items need to flow with the screen, grid _stinks_ horrible at this) Grid: 1. Specific forced number of columns but unknown number of rows (the control is the ultimate, flexbox still does some loosey-goosey stuff where grid stays put). Also, when I know exactly what I want and where it will go and there is no ambiguity about it, grid is perfect. Rows are implicit (ie, any number of rows) This makes clean form building a dream... 2. Specific layout with areas. Think header, columns, footer all part of a unified design. Way, easier in grid than in flexbox. Grid has grid-gap, which is vital for making some layouts easy. Flex only has grid-gap in Firefox, so you are stuck with flippin margins for item spacing in flexbox still, yuck.
  - bobthepanda 7y ago
    To add onto point 2, areas are really powerful, because it makes changing layout based on screen width really easy.
deleted 7y ago
[deleted]
dmix 7y ago
I added a space between the two sentences to make it clearer I'm talking about CSS grid syntax doing a better job of what it's intended for, not doing what flexbox does. I think the distinction and the small crossover is pretty clear to anyone who's used them.

acdanger 7y ago

Can you outline what problems each is trying to solve? I end up using each seemingly interchangeably quite often.

gherkinnn 7y ago
Flex: one dimension and handling an unknown amount of arbitrarily sized elements in any order Grid: two dimensions and handling a known amount of reasonably sized elements
jasim 7y ago
Imagine you take a piece of paper, draw 4 vertical and horizontal lines dividing the page into 16 cells. Now when you place an element in any of these cells with width: 100%, they'll take exactly the width of the grid cell. It can't grow beyond that. You have a lot of flexibility in choosing the width and height of each cell, but they are rigid. In case of Flexbox, we don't specify any fixed lines to which the elements will size. Instead, we say general rules saying elements can grow to as much size is available, or stay at the beginning of the row etc. The layout is determined to a large extend by the elements we place rather than on a fixed set of gridlines.
irrational 7y ago
Use CSS Grid for a grid - like a spreadsheet with multiple rows and columns. Use Flexbox for a single row or column. So you might have a 10x10 grid and in the cell in row 3 column 5 you might want to have a bunch of images that are all in a row. Use Flexbox to layout those images.
- nailer 7y ago
  Personally I can't be bothered and use grid for both. Why have a separate syntax for one dimension?
  - irrational 7y ago
    Here are 10 reasons why. https://stackoverflow.com/questions/55064488/what-are-the-areas-covered-by-flexbox-which-are-difficult-or-impossible-to-achie https://stackoverflow.com/questions/55064488/what-are-the-ar...
    - nailer 7y ago
      Thanks. Reconsidering my position. I think I'll still do div {display: grid }; in my basic styles but be aware of some cases where flex may be more appropriate.
Vanderson 7y ago
Flex: 1. For unknown number of items in one direction. (toolbar of buttons works better in flex) 2. Row-wrapping items. (ie, the unknown number of items need to flow with the screen, grid _stinks_ horrible at this) Grid: 1. Specific forced number of columns but unknown number of rows (the control is the ultimate, flexbox still does some loosey-goosey stuff where grid stays put). Also, when I know exactly what I want and where it will go and there is no ambiguity about it, grid is perfect. Rows are implicit (ie, any number of rows) This makes clean form building a dream... 2. Specific layout with areas. Think header, columns, footer all part of a unified design. Way, easier in grid than in flexbox. Grid has grid-gap, which is vital for making some layouts easy. Flex only has grid-gap in Firefox, so you are stuck with flippin margins for item spacing in flexbox still, yuck.
- bobthepanda 7y ago
  To add onto point 2, areas are really powerful, because it makes changing layout based on screen width really easy.

deleted 7y ago

[deleted]

dmix 7y ago

I added a space between the two sentences to make it clearer I'm talking about CSS grid syntax doing a better job of what it's intended for, not doing what flexbox does. I think the distinction and the small crossover is pretty clear to anyone who's used them.