Product preview card component using flexbox

As the project is, it is more recommended to use flexbox. When we describe flexbox as one dimensional we highlight the fact that flexbox handles layout in only one dimension at a time — either as a row or as a column. This contrasts with the two-dimensional model of the CSS Grid Layout, which controls columns and rows at the same time.

The display: grid statement gives you a single column grid, so your elements continue to display one below the other, as they do in the normal flow. To see something that looks more like a grid, we need to add columns to the grid.

Since the product detail section needs the flexibility to arrange the element, I recommend you to use flexbox. You can use default flex direction for outer section and use column for product detail section.