Selamlar arkadaşlar, bugün CSS ile scroll ettikçe birbirinin üstüne yığın olan bir kart stack oluşturacağız.

Adım 1: Grid Konteyner #

Maceramıza kart yığınımızı tutacak containerı oluşturarak başlayalım. Aşağıdaki .grid-container classı işimizi görecek:

flex: none: Containerımızın yanlışlıkla flexbox davranışına kaymamasını sağlar.
grid-template-columns: repeat(1, minmax(200px, 1fr)): Minimum boyutu 200px ve maksimum esnek boyutu olan tek bir sütun oluşturur.

Adım 2: Sticky Kartlar #

Şimdi dikkatimizi tek tek kartlara çevirelim. Bakın burası çok önemli :)

flex: none: Kartımızı flexbox karmaşasından korur.
height: auto: Kartımızın büyülü içeriğine göre yüksekliğini zarif bir şekilde ayarlamasını sağlar.
position: sticky: Bu özellik, sayfa kaydırıldığında grid kartlarımızın birbirinin üzerine yığılmasını sağlar.
top: 48px: Kartımızın sticky (yapışkan) hale geldiği üst kısımdan mistik mesafeyi belirler. Bunu kaldırdığınızda sihir kaybolacaktır. Kodu kopyalamanızı ve üzerinde oynamanızı şiddetle tavsiye ederim.
width: %100: Kartımıza containerın tüm genişliğini kaplayacak gücü verir.
z-index: 1: Kartımızı diğerlerinin üzerine yükselterek ışıl ışıl parlamasını sağlar.

Tebrikler, geliştirici dostum! CSS Grid'in sihrini kullanarak duyarlı ve görsel olarak hoş bir kart yığını oluşturdunuz. Tamamen size ait olması için farklı görseller ve içeriklerle denemeler yapmaktan çekinmeyin. Kaydırma efektini daha zarif hale getirmek için kartlara bazı kaydırma tetiklemeli animasyonlar ekleyerek challenge'ı daha da ileriye taşıyabilirsiniz.

Demo kodunu burada kontrol ediniz ve üzerinde oynayarak position: sticky 'i keşfedin.

Kodunuz hatasız ve tasarımlarınız büyüleyici olsun! ✨🔮✨