Responive Product Preview Card Using CSS Grid and Flexbox

Hello, congratulations on completing this project successfully.

Your query was how to use units in css. Well, there are two types of unit available in css. One is absolute unit and the other one is relative. If you design a responsive layout, you should go for relative unit. Both em and rem are relative unit based on parent and root font size respectively.

• rem is the best for font-size.
• bootstrap and tailwind use these relative units, even in margin and padding.

NB: This does not mean that px is useless. Use it when you feel it.

Thank you.

To center .product on the page using grid, replace align-items: center with align-content: center. when centering items in grid, justify-content goes with align-content and justify-items goes with align-items. unlike flexbox which is always justify-content and align-items.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING