<div class="product-wrapper"> <!-- Ürünlerin tutulduğu kapsayıcı başlangıç -->
    <div class="product"> <!-- 1. Ürün -->
        <div class="product-head"> <!-- Ürün Resmi -->
            <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="product-body"> <!-- Ürün İsmi -->
            Product Name
        </div>
        <div class="product-footer"> <!-- Sepete Ekle Butonu -->
            <button>Sepete ekle</button>
        </div>
    </div> <!-- 1. Ürün bitiş -->
    <div class="product"> <!-- 2. Ürün başlangıç -->
        <div class="product-head"> <!-- Ürün Resmi -->
            <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="product-body">
            <!-- Ürünün yüksekliği diğerinden farklı olsun diye <br> yazdım -->
            Product Name <br><br><br><br><br><br><br>
        </div>
        <div class="product-footer"> <!-- Sepete Ekle Butonu -->
            <button>Sepete ekle</button>
        </div>
    </div> <!-- 2. Ürün bitiş -->
</div> <!-- Ürünlerin tutulduğu kapsayıcı bitiş -->

.product-wrapper{ 
    display: grid; /* Ürünler yan yana gelsin diye */
    grid-template-columns: 1fr 1fr; /* Kaç adet ürünün yan yana geliceği belirler, kaç ürün yan yana gelsin istiyorsak o kadar 1fr yazmamız gerekiyor. */
}
.product{
    display: flex;
    flex-direction: column;
}
.product-footer{
    margin-top: auto; 
    /* 
    * sepete ekle butonunun içinde olduğu bu div ürünün yüksekliği ne kadar olursa olsun onun daima en altta kalmasını sağlar.
    * flex-direction: column; özelliği olmadan kullanılmıyor.
    */
}