Why usually use flex to design website layout instead using grid?
For pages with a one-dimensional layout, it makes sense to use flex.
Above layout is an one-dimensional page.This is usually seen on sites that promote companies or products, such as brand pages.So it is obviously good to use flex with column direction to design basic layout.
However, many other sites usually have a two-dimensional layout rather than a one-dimensional layout.In most cases, there is a Header area at the top, and a side navigation menu (or side contents) and main contents area in the center. And at the bottom there is a footer area like above image.
When I first learned about grid, I heard that it was very efficient when designing layouts with a two-dimensional structure. I also heard that the basic layout of a website can all be designed using grid. Well...the layout above can also be designed both grid or flex.
However, I analyzed the CSS layout of several websites with side menus using Chrome developer tools, but I could not find a single example of using grid in the website layout. That all layouts were designed using flex and nested divs. The usage of Grid is really limited to real grid shaped UI such as image galleries.(Only for the websites I have checked so far)
Why usually use flex instead grid for the basic layout of your website? I guess the reason is that in a situation where both flex and grid are available, choosing flex which is easier to use is easier to develop.
Well... I've heard that Grid has a problem that isn't well supported with older versions of browsers, but it seems that most users rarely use older versions of browsers that don't support the grid very well. So I don't think that's the main reason to use flex instead grid.