QR code component

Hi Justin, congrats on completing your first challenge, and also, welcome to Frontend Mentor! 😊

About your question on grid and flexbox, I think whichever one you use is fine as long as it helps you get the job done at your current ability. Some people differentiate the two by saying flexbox is for one-dimensional layouts (either vertical or horizontal) and grid is for two-dimensional (both vertical and horizontal); there will be times when using one will be easier than the other, and also there will be instances where only using one will work. Ultimately it's all about how you use the tool. For me, I use flexbox probably 90% of the time out of habit, and I use grid for certain things that I feel are easier or requires less code than flexbox.

About your solution, great job here! I think you did many things well, and if I need to give some feedback, probably there's just a few things I'd do differently:

1. For the flex-container I would use min-height: 100vh instead of just height
2. For the card, I would use max-width instead of just width so that the card can be responsive. I'd also add margin: 1rem so that there's some spacing when the browser screen is small
3. For card-body, since this is the container that has the image text, I would put padding: 1rem to make sure there's a uniform spacing around the elements. In this way, I won't need to add any individual margin or padding to other parts. I'd remove the margin-bottom here also, and if you do need some more spacing at the bottom, then I'd probably use padding-bottom.
4. For the img, I'd change the border-radius to be the same as the card's, and I'd also change the width to 100% instead of a fixed width. What this means is that the image will take whatever width that the container has (minus the padding and margins), and there won't be a need to set its own width.

Hope some of this can help you out, and once again, well done!

grid is preferable for creating card layouts like this and its easy too once u figure out how to play with row and column sizes...for example for this QR card u can create one parent Div and inside u can create two Divs and by giving the parent div all grid properties it will be awesome code specially increasing or decreasing or other properties of grids