Grid ile Fotoğraf Galerisi

Bu projede, CSS Grid kullanarak basit ve duyarlı bir fotoğraf galerisi düzeni oluşturacaksınız. Bu alıştırma, display: grid, grid-template-columns ve gap özelliklerini pratik olarak uygulamanıza yardımcı olacaktır.

Proje Detayları

Bu projede, CSS Grid kullanarak basit ve duyarlı bir fotoğraf galerisi düzeni oluşturacaksınız. Bu alıştırma, display: grid, grid-template-columns ve gap özelliklerini pratik olarak uygulamanıza yardımcı olacaktır.

Proje Adımları:

  1. Bir HTML dosyası oluşturun ve birkaç galeri öğesi (resim ve isteğe bağlı başlık içeren) için temel yapıyı hazırlayın.
  2. Bir CSS dosyası oluşturun ve HTML dosyasına bağlayın.
  3. Galeri öğelerini içeren bir konteyner elementine display: grid; uygulayın.
  4. Duyarlı bir sütun yapısı oluşturmak için grid-template-columns özelliğini repeat(auto-fit, minmax(minimum_genişlik, 1fr)) gibi bir değerle ayarlayın. Örneğin: repeat(auto-fit, minmax(200px, 1fr)). Bu, tarayıcının sığdırabildiği kadar sütun oluşturmasını sağlar ve her sütunun en az 200px genişliğinde olmasını garanti eder.
  5. Galeri öğeleri arasında boşluk bırakmak için gap özelliğini kullanın.
  6. Galeri öğelerinin (resimlerin) kendi konteynerlarına sığmasını sağlayın (örneğin, img { max-width: 100%; display: block; }).
  7. İsteğe bağlı olarak, bazı galeri öğelerinin birden fazla sütun veya satır kaplamasını sağlamak için grid-column veya grid-row özelliklerini deneyin.

Başlangıç HTML Kodu:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Fotoğraf Galerisi</title>
    <link rel="stylesheet" href="gallery-layout.css">
</head>
<body>
    <h1>Fotoğraf Galerisi</h1>
    <div class="gallery-container">
        <div class="gallery-item">
            <img src="https://via.placeholder.com/300x200?text=Resim+1" alt="Resim 1">
            <p>Resim 1 Açıklaması</p>
        </div>
        <div class="gallery-item">
            <img src="https://via.placeholder.com/300x200?text=Resim+2" alt="Resim 2">
            <p>Resim 2 Açıklaması</p>
        </div>
        <div class="gallery-item">
            <img src="https://via.placeholder.com/300x200?text=Resim+3" alt="Resim 3">
            <p>Resim 3 Açıklaması</p>
        </div>
        <div class="gallery-item">
            <img src="https://via.placeholder.com/300x200?text=Resim+4" alt="Resim 4">
            <p>Resim 4 Açıklaması</p>
        </div>
        <div class="gallery-item">
            <img src="https://via.placeholder.com/300x200?text=Resim+5" alt="Resim 5">
            <p>Resim 5 Açıklaması</p>
        </div>
        <div class="gallery-item">
            <img src="https://via.placeholder.com/300x200?text=Resim+6" alt="Resim 6">
            <p>Resim 6 Açıklaması</p>
        </div>
        <!-- Daha fazla galeri öğesi ekleyebilirsiniz -->
    </div>
</body>
</html>

Bu HTML dosyasını ve boş bir gallery-layout.css dosyasını oluşturun, ardından CSS dosyasını yukarıdaki adımlara göre doldurun.