3-column preview card component

Hi there! 👋

I recommend using flexbox since the layout for the cards is not a two-dimensional layout. Flexbox is great for a one-dimensional layout.

I suggest wrapping the card elements with main landmark. After that, make the main element as the flex container for all the card elements.

For the body element, you can use the grid to center the layout.

Also, I would recommend writing the CSS with the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

That's it! Hope this helps.

You can use flex instead of grid and use flex-wrap to make it responsive but you still have to use media-queries to remove the border-radius in mobile mode. Though grid and flex can be used interchangeably, flex is usually used for arranging items in a single direction(horizontal or vertical) while grid is usually used for arranging items in both directions. Here is a link to learn more about flex link and here is another link to learn about media queries link.