In this challenge, I mainly used Flexbox

Hola leonardo como estas?

Respondiendo a tu pregunta sobre Grid...

Tengo una regla (opinión personal) siempre uso GRID para crear diseños complejos y FLEX para posicionar elementos.

Por ejemplo, en este caso creé la estructura del componente con GRID y el diseño de la columna con FLEX.

FLEX y GRID son muy buenos pero flexbox es más versátil para cosas simples.

Link per mi solucion con GRID: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

Keep it up!

Hello Leonardo, congrats on finishing the challenge! you did a pretty good job.

To answer your question, depends a lot in the situation when to use Grid or Flex, you usually use flex for simple containers that have only one row or one column of items (for example, a navigation bar, a footer...), and you use CSS Grid when you need complex layouts with multiple columns and rows (for example, an image gallery, an e-commerce products section...).

Apart from that, in this case I would go for flex to center your component in the middle of the screen instead of using margins, if you remove the margin of your component and add flex to the body like this:

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

Your component will get fully centered without the needs of margins!

Hope my feedback helps you! good job!

Hi! I love how you took this challenge by the horns and added your own touch to it. It's actually kind of refreshing to see such solutions. But I noticed you didn't add the SVG for the shopping cart into the 'add to cart' button. Was that on purpose, or did you just miss it?