Merhabalar.

Bu yazı dizim boyunca CSS Grid modülüne bakacağız.

CSS Grid, web sayfalarında düzen oluşturmak için kullanılan bir düzen modelidir. CSS3 ile birlikte tanıtılan bir özelliktir ve sayfaları daha esnek ve karmaşık düzenlere sahip hale getirme imkanı sağlar. Grid, hem satır (row) hem de sütun (column) düzenini kontrol etme yeteneğiyle öne çıkar.

Temel özellikleri şunlardır:

Grid Container ve Grid Öğeleri:

Bir HTML öğesi üzerinde display: grid; veya display: inline-grid; özelliği tanımlanarak bir grid container oluşturulur.

Container içindeki öğeler grid öğeleri olur.

Grid Sütun ve Satırları:

grid-template-columns ve grid-template-rows özellikleri ile sütun ve satırlar belirlenir.

fr birimi ile sütun ve satırlara esneklik kazandırılır.

Grid Öğe Yerleşimi:

grid-column ve grid-row özellikleri ile grid öğelerinin hangi sütun veya satıra yerleştirileceği belirlenir.

grid-area özelliği ile öğelerin belirli bir alan içine yerleştirilmesi sağlanır.

Grid Hizalama:

justify-items ve align-items özellikleri ile grid öğelerinin içindeki içerikleri hizalamak mümkündür.

justify-content ve align-content özellikleri ile container içindeki grid öğelerini hizalamak mümkündür.

Grid Şablonları:

grid-template-areas özelliği ile özel grid şablonları oluşturulabilir.

grid-template özelliği ile sütun ve satırları bir arada belirleyebilirsiniz.

Media Query ve Responsive Tasarım:

Media query kullanarak farklı ekran boyutları için özelleştirilmiş grid düzenleri oluşturabilirsiniz.

CSS Grid, esnek ve karmaşık düzenlerin oluşturulmasını sağlayarak, sayfa tasarımında daha fazla kontrol ve özgürlük sunar.

Bir sonraki yazımda görüşmek üzere.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

2 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

2 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

3 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

4 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

4 gün ago

Kedimiz Oly & FIP Süreci 4 – Antalya’ya Yolculuk – Bir Şeyler Ters Gidiyor… & İstanbul’a Geri Dönüş

9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…

4 gün ago