Html FlexBox vs Grid?

When I first started to use html, I found positioning elements to be quite difficult. As time went on, I learned a few techniques like flexbox and also the grid system. I thought this was great! BUT, now I started to get confused again because there was a lot of overlap between flexes and grids. Was it justify-content, or align items, how about align-text? Now I am confused again!

The best thing is to start at the top. Do you want a grid? Or a flexbox? The biggest difference is

Flexbox is 1 dimension (row or column)

Grids have 2 dimensions (rows/columns)

My general rule of thumb is to start with grids for the larger items, and use flexbox to organize smaller things. The reason I suggest the grid for larger items, is because it is more flexible to re-arrange when considering different screen resolutions. If you have a flexbox, you can make it a row or column. But, with a grid, you can be more creative in the layout.

This is a nice example. Would you use a grid or a flexbox?

In this case, it is a single row. For now, either one would work This is when you should consider, how will this change if the page is resized?

Option 1: Flexbox

• For the flexbox, the only possible change is to move the row into a column.

Option 2: Grid:

• The grid can be re-arrange. Right now it is 1 row by 6 columns. But this can be re-arranged into a grid, or a column. This would provide further flexibility for displaying the information.

I think I’ll take option 2:

When the page size is reduced, the grid was changed to be a 2 rows x 4 columns. This would not have been possible with flexbox. The only option would have been to put everything into a column.

And finally, for even smaller sizes, it can be stacked even further.

This looks more like a single column. But again, remember, the grid gave us a chance for greater flexibility for a row/column.