[✔] Product Lists - CSS Flexbox or CSS Grid?

I recently have viewed Flexbox and Grid Codepens, and I wondered, which would be better in the scenario below, flexbox or Grid?
Codepen to use this:

Side note, the products list with all the icons is the item in question

For what part of the page?

They both have their uses you don’t have to pick one over the other (unless you need to worry about browser support). Use whatever you like and gets the job done.

The products list. It says stuff like security software, IDEs, etc.

Totally of topic, but with a black background I think black icons is the wrong choice of color.
Page looks really good btw

Grids and flexbox are complementary technologies – typically you put a flexbox container inside of a grid, using the grid for the broad page layout, and the flexbox to make individual sections have the direction and spacing you want.

Of course, there’s exceptions to every rule, and someone could probably point at a use case that goes the other way around.

1 Like

Personally, I would use Grid for the actual layout (columns and rows) and then, at least to start with, flexbox for the grid content (icons and text). But you can totally use Grid for the content as well and I’m just thinking about what I would instinctively do at first.

Thanks, though I admit I always feel like the page can be massively improved using something that I just don’t remember, forgetting that I’m supposed to be showing what I learned.