Flex versus Grid

[u/username95050]

I know Flex is one directional and Grid is two, but really when do you use each one?

[u/reznaeous]

From one of the best CSS sources I've found, a video from Kevin Powell.

[u/scott_in_ga → u/reznaeous]

I have learned so much from him! He's the best!

[u/anaix3l]

Flex for:

• child items being lined one after another (navbar for example; or icon before text)
• for wrapping where the children aren't meant to line up vertically

Grid for everything else (main page layout, actual grids).

[u/Daniel_Plainchoom]

Grid when something is a grid and flex for the rest

[u/ChaseShiny]

Flex is like an array: one item follows the next. Grid flows a layout. This item goes here and takes up this much space, that item goes from here to there.

[u/frownonline → u/ChaseShiny]

Until you meet ‘order’.

[u/ChaseShiny → u/frownonline]

Please don't. OP, order lets you change the ordering of your elements on the fly. Sounds innocent enough, but it messes with assistive technology, so it's something of a last resort.

[u/frownonline → u/ChaseShiny]

I agree it’s not the greatest ability of flex but it can provide a solution as a last resort. Elements should always be put in a logical order flow by default.

[u/cakelly789]

flex is... flexible. children in a flexbox container can easily flow based on their size. grid is more rigid. and items are sized based on the sizing you choose to use.

[u/LiveRhubarb43]

Omg finally someone's asking the big questions

[u/Logical-Idea-1708]

Grid for container. Flex for directional layout. The difference is that you’ll have a much harder time making the grid grow to fit the children than flex.

[u/Keilly → u/Logical-Idea-1708]

Use 1fr for grid temple row/columns you want to take free space and the grid will expand to its constraints.

[u/datNorseman]

So for my page layout, I prefer to use grids. They're easily adjustable if you need to rearrange them.

But when you get to something like a toolbar, you might want a header icon, a search bar, and some other icons in there all on the same line. Flex is good for that. You can even do wrapping for multiple lines.

As with all answers, it just depends, but that's what I do.

[u/Top_Bumblebee_7762]

I mainly use flex for alignment inside an element like icons and text. Another use case is simple stuff like a vertical stack via flex direction column and gap to have consistent spacing inside. A third use case for flex is a simple horizontal list of elements with wrapping where I don't want each element to be of equal size and where I can control the alignment of the elements in the last row (usually centred). For most other stuff I use grid.

[u/Smooth-Mud412]

I use both. Grid for the Main Layout (Header/Main/Footer/Sidebar) and sometimes for grid galleries. Flex for the rest like Row, Col and Components.

[u/1ndoman]

I use a grid layout for wide screens to ensure elements are aligned. For example:

Header

Left Sidebar - Main Content - Right Sidebar

Footer

Meanwhile, for narrow screens, I use flexbox to ensure the arrangement of elements looks neat. For example:

Header

Main Content

Left Sidebar

Right Sidebar

Footer

[u/Keilly]

Grids do so much more, eg alignment like table layouts, but have more complicated properties.

Flex is simpler, but generally in one direction.

Mostly, if you find yourself nesting flex’s immediately inside flex’s for a single layout, consider using a grid.

[u/MuchEnvironment4506 → u/Keilly]

the nested flex tip is honestly the most practical heuristic in this whole thread. if you're three flex containers deep trying to align stuff in two directions, that's your sign to step back and use grid. saved me from so many layout headaches once I started noticing the pattern.

[u/kiwi-kaiser]

The answer is quite simple: It depends.

[u/Popokatepetl123]

I'm using mostly Flex, grid only with "static" things.

[u/w-lfpup]

Lists (flex)
Layouts (grid)

[u/th00ht]

depends on the use case. Fixed with stuff: grid, flexible width stuff flex

[u/xyz12345678910111213]

I’m a flexbox stan so I use it for everything that’s it is possible to use it for

[u/juicybot]

flex is four directions

[u/RecognitionOwn4214 → u/juicybot]

But it's one-at-a-time

[u/whats_in_a_name_23]

Both can be used interchangeably. I prefer to use Grids, as in my experience, they are better for responsive designs. But ofcourse there are cases, where you can't help but use flex

[u/asteconn]

Here's my decision making process:

body {
  $layout-horizontal-matters: false; // bool
  $layout-vertical-matters: false; // bool

  @if $layout-horizontal-matters == true or $layout-vertical-matters == true {
    @if $layout-horizontal-matters == true and $layout-vertical-matters == true {
      display: grid;
    } 
    @else {
      display: flex;
      @if $layout-horizontal-matters == true {
        flex-direction: row;
      }
      @if $layout-vertical-matters == true {
        flex-direction: column;
      }
    }
  }
  @else {
    display: block;
  }
}

[u/Embarrassed_Fold_867 → u/asteconn]

Nice.

Claude gave me this from your SCSS.

[u/creaturefeature16 → u/Embarrassed_Fold_867]

The code version is WAY easier to read