Flew-grow properties with Max-Height.

To ensure all your product cards have the same height using the CSS flexbox approach, you need to adjust your flex properties and ensure that the individual cards’ heights are set to grow or align consistently within their container.

Updated CSS for Equal Height Cards:

.cms-home .product-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch; /* Ensure all items stretch to the same height */
    height: 100%;
}

.cms-home .product-item {
    display: flex;
    flex-direction: column; /* Allows the content to stack vertically */
    justify-content: space-between; /* Ensures content is distributed evenly */
    flex-grow: 1; /* Ensure all items grow to the same height */
}

Explanation of the Changes:

1. align-items: stretch;: This ensures that all the product items stretch to the height of the tallest item in the row.
2. .product-item { flex-grow: 1; }: This ensures that all product cards grow to fill the available height, so they are equal.
3. .product-item { display: flex; flex-direction: column; justify-content: space-between; }: This makes sure that the content inside the card (like title, image, buttons) stacks vertically and is distributed evenly.

Steps:

• Parent Container (.product-items): This is the wrapper for all the product cards. It uses display: flex to make the children (.product-item) align evenly and stretch to the same height.
• Child Items (.product-item): Each individual product card is also set up as a flex container to ensure that its content (e.g., image, title, button) is aligned vertically and stretched to fill the full height.