Altın Konu CSS Izgara Galerisi (Kod + Demolar)

KERİM ERBAY · 23 Kas 2023

CSS Izgara Galerisi Türlerini Codepen'den Kodunuza ekleyin.

Web Siteniz için farklı bir ızgara galerisi mi arıyorsunuz?

CSS'de ızgara galerisi, resimler veya metin gibi öğeleri ızgara benzeri bir yapıda düzenleyen bir düzen tekniğidir. Genellikle içeriğin düzenli ve görsel olarak çekici bir görüntüsünü oluşturmak için kullanılır.

CSS'de bir ızgara galerisi oluşturmak için, iki boyutlu ızgara tabanlı mizanpajlar oluşturmanın güçlü bir yolunu sağlayan CSS Izgara Düzeni modülünü kullanabilirsiniz. Temel fikir, bir ızgara kabı tanımlamak ve ızgaranın sütunlarını ve satırlarını tanımlamak için ızgara-şablon-sütunları ve ızgara-şablon-satırları özelliklerini belirtmektir. Daha sonra grid-column ve grid-row özelliklerini kullanarak grid öğelerini grid içerisine yerleştirebilirsiniz.

CSS'de ızgara galerisi düzeni kullanmanın birçok avantajı vardır:

Duyarlılık: Bir ızgara galerisi, ekran genişliğine göre sütun sayısı veya satır yükseklikleri ayarlanarak farklı ekran boyutlarına kolayca duyarlı hale getirilebilir.
Tutarlı hizalama: Izgara galerisi, boyutlarına veya en boy oranlarına bakılmaksızın tüm öğelerin bir ızgaraya hizalandığı tutarlı bir düzen oluşturmanıza olanak tanır.
Esnek düzen: Izgara galerisi, sütun sayısını, satır yüksekliğini veya ızgara öğelerinin boyutunu ayarlayarak içeriğinizin düzenini kolayca değiştirmenize olanak tanır.
Alanın verimli kullanımı: Izgara galerisi ile düzeni bozmadan belirli bir alana daha fazla öğe sığdırarak mevcut alan kullanımını en üst düzeye çıkarabilirsiniz.
Bakımı kolay: Izgara galerisi sayesinde, diğer öğeleri manuel olarak yeniden konumlandırmaya veya yeniden boyutlandırmaya gerek kalmadan mizanpajdaki öğeleri kolayca ekleyebilir veya kaldırabilirsiniz.

Genel olarak, ızgara galeri düzeni, bir web sitesindeki içeriği düzenlemek ve sunmak için esnek, duyarlı ve görsel olarak çekici bir yol sağlar; bu da onu görüntülerin veya diğer medya türlerinin görüntülenmesi için popüler bir seçim haline getirir.

Bu Yazıda Dikkatle Seçilmiş Birkaç Grid Galerisini Sizlerle Paylaşacağım. Bu ızgara galerileri Yaklaşan Web Tabanlı Projelerinizde Kullanıma Mevcuttur.

Öyleyse HTML ve CSS kullanan ızgara galerileri hakkında daha iyi bilgi edinmek için bazı projelere bakalım.

CSS Izgarası ve Flexbox ile Resim Galerisi

Kullanılan Dil	HTML, CSS
Dış Bağlantılar\ Bağımlılıklar	HAYIR
duyarlı	Evet

2. Medya Sorguları Olmayan Duyarlı Resim Galerisi

Kullanılan Dil	HTML, CSS
Dış Bağlantılar\ Bağımlılıklar	HAYIR
duyarlı	Evet

Yukarıdaki kod, Medya Sorguları olmayan ancak CSS Izgara Düzeni olan bir Duyarlı Resim Galerisini temsil eder. Bu, CSS Izgara Düzeni ile ve medya sorguları kullanılmadan tasarlanmış basit ama etkili bir resim galerisidir.

3. Duyarlı Kademeli CSS Izgara Galerisi

Kullanılan Dil	HTML, CSS
Dış Bağlantılar\ Bağımlılıklar	HAYIR
duyarlı	Evet

Yukarıdaki kod, kademeli görüntülere sahip duyarlı bir CSS ızgara düzenini temsil eder.

4. Izgara Galerisi

Kullanılan Dil	HTML, CSS, JS
Dış Bağlantılar\ Bağımlılıklar	Evet
duyarlı	Evet

Bu basit bir 8'li resim galerisidir. Medya sorgusuna bakılmaksızın her şeyi simetrik tutmak için önyükleme ızgarası çerçevesini kullanır. Bir resme tıklamak tam genişlikte başlatılacak ve bir başlık ve açıklama görüntülenecektir. Açıklamanın taşınmasına (sağ üst, sol alt vb.) yönelik sınıflar eklenmiştir; böylece kullanıcı, görsel içeriğine bağlı olarak açıklamayı uygun şekilde yerleştirebilir.

5. Twitter Anlarından ilham alan CSS Izgara Anları Galerisi

Kullanılan Dil	HTML, CSS
Dış Bağlantılar\ Bağımlılıklar	HAYIR
duyarlı	Evet

Yukarıdaki kod, hem genel düzen hem de bireysel kart düzeni için CSS Izgarasını kullanan Etkileşimli bir galeriyi temsil eder. Bu düzen, Twitter Anları sayfasından ilham aldı ve CSS Grid'in birden fazla düzeyde gelişmiş duyarlı kart tabanlı düzenlere nasıl izin verdiğini gösteriyor. Bu, HTML ve CSS kullanılarak yapılır.

6. Yığma Izgara Galerisi – CSS Uygulaması

Kullanılan Dil	HTML, CSS
Dış Bağlantılar\ Bağımlılıklar	Evet
duyarlı	Evet

Yukarıdaki kod, görüntülerin ızgara düzenini temsil eder. Bu, HTML ve CSS kullanılarak yapılır.

7. Izgara Galerisi

Kullanılan Dil	HTML, CSS
Dış Bağlantılar\ Bağımlılıklar	HAYIR
duyarlı	Evet

Yukarıdaki kod bir ızgara galerisini temsil eder. Bu, HTML ve CSS kullanılarak yapılır.

Kullanılan Dil	HTML, CSS
Dış Bağlantılar\ Bağımlılıklar	HAYIR
duyarlı	Evet

Yukarıdaki kod, yaratıcı bir ızgara galerisini temsil eder. Bu, HTML ve CSS kullanılarak yapılır.

9. Duyarlı Flexbox Izgara Galerisi

Kullanılan Dil	HTML, CSS
Dış Bağlantılar\ Bağımlılıklar	HAYIR
duyarlı	Evet

Şekilleri galeri içinde eşit şekilde dağıtmak için flexbox özelliğini kullanan duyarlı bir galeri. Izgara, 50em'nin altındaki genişliklerde 2 sütun, 50em'nin üzerindeki genişliklerde ise 4 sütun gösterecektir.