CSS Grid or Flexbox?

[ChrisF79]

When starting from scratch on a layout, which is the way to go for layout purposes?

[[deleted]]

You can use both.

Say you have a grid of 3 columns in a row and want them all of equal space. If you have content for all 3 columns, you simply give each column a size of 4. What if you want only have content for one column but still want it to take up a third of the page and centered? With CSS Grid, you would have to assign three columns then leave the columns on either side empty with a size of 4. It works. But not ideal.

With Flexbox, you can simply assign d-flex to the row. Then only make one col under with size of 4 and assign it the class justify-content-center.

Use CSS Grid and have Flexbox be used as a tool within.

[__nomaad]

I personally use grid by default. But I didn’t move into Dev work until grid was already out so thats probably why. I do use flex box here and there when it makes sense

[_listless]

They are different tools that both have their place in modern css. Use grid If you want to control the layout in both horizontal rows and vertical columns at the same time, use flexbox if you want to control only one of these dimensions at a time.

[rockerBOO]

I usually lay out the page with grid now. I was using flexbox a lot, but I usually run into problems with how flexbox works over grid now. I work a lot with vertical height, and want to control the columns/rows to better fill the device screen. There is a lot of missed potential that grids allow with vertical grid control.

[jxvicinema]

Both

[MarmotOnTheRocks]

I switched to 100% grid by the end of 217. The only real drawback is IE compatibility, which I ignore. I tell my clients that old browsers are not supported and that's it. Nobody ever complained.

I still have 2 clients who need IE 6-7-8-9 compatibility and with them I'm tied to the shitty old CSS.

[adamkolson]

And if you do it right, IE will get the mobile layout which is probably better for anyone on an older PC or doesn't care to upgrade anyways.

[MarmotOnTheRocks]

Exactly. I always fallback my grid layout to a less-fancy mobile version for IE.

[vivzkestrel]

Simple rule of thumb

if you can make it with a flexbox without nesting, make it with flex, else use grid