HTML & CSS Mini Örnekleri — Basit Grid ve Responsive Layout

Hızlı Başlangıç: CSS Grid ile Basit Layout'lar

CSS Grid, iki boyutlu düzenler oluşturmak için tasarlanmış güçlü bir araçtır ve modern tarayıcılar tarafından geniş ölçüde desteklenmektedir. Temel fikir; bir container'ı grid container hâline getirip içine yerleştirdiğiniz öğeleri (grid items) satır ve sütun bazında konumlandırmaktır. Bu makalede üç kısa örnek üzerinden ilerleyeceğiz: basit 3 sütunlu grid, header/sidebar/content/footer düzeni (grid-template-areas) ve responsive bir grid örneği.

Detaylı rehber ve referanslar için MDN Web Docs’un Grid kılavuzlarına bakabilirsiniz: MDN — CSS Grid Layout Guide ve sık kullanılan layout örnekleri için MDN — Common grid layouts. Ayrıca temel örnekler için W3Schools’un ilgili sayfası öğretici olabilir: W3Schools — Grid Layout.

Örnek 1 — Basit 3 Sütunlu Grid

Hızlı bir 3 sütunlu düzen kurmak için container'a display: grid; verip sütunları grid-template-columns ile tanımlamak yeterlidir. Aşağıda HTML ve CSS örneği yer alıyor.

HTML	CSS
<div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>	.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid > div { background: #f2f2f2; padding: 16px; text-align: center; }

Açıklama:

display: grid; ile container grid olur.
grid-template-columns: repeat(3, 1fr); üç eşit sütun oluşturur; fr (fraction) birimler alanın paylaştırılması için kullanılır.
gap satır ve sütun aralığını belirler.

Örnek 2 — Header / Sidebar / Main / Footer Düzeni (grid-template-areas)

Grid template areas, düzenin görsel bir haritasını yazılı olarak tanımlamanıza izin verir. Kompleks düzenleri daha okunaklı kılar. Aşağıda iki sütunlu bir yapı örneği yer alıyor: sol sidebar, sağ content; üstte header, altta footer.

HTML	CSS
<div class="layout"> <header>Başlık</header> <aside>Sidebar</aside> <main>Ana içerik</main> <footer>Altbilgi</footer> </div>	.layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 250px 1fr; gap: 16px; } header { grid-area: header; } aside { grid-area: sidebar; } main { grid-area: main; } footer { grid-area: footer; }

Notlar:

grid-template-areas ile yerleşimi satır bazında adlandırırsınız; her öğeye grid-area ile ad atanır.
Bu yaklaşım, karmaşık maketleri daha sürdürülebilir hâle getirir ve tasarım değişiklikleri kolaylaşır.

Örnek 3 — Responsive Grid: auto-fit ve minmax

Responsive (duyarlı) bir grid oluşturmak için repeat(auto-fit, minmax(...)) yaygın ve güçlü bir desendir. Sütun sayısı ekran genişliğine göre otomatik ayarlanır.

HTML	CSS
<div class="grid-responsive"> <div>Kart 1</div> <div>Kart 2</div> <div>Kart 3</div> <div>Kart 4</div> <div>Kart 5</div> </div>	.grid-responsive { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } @media (max-width: 600px) { .grid-responsive { grid-template-columns: 1fr; } }

HTML

CSS

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

@media (max-width: 600px) {
.grid-responsive { grid-template-columns: 1fr; }
}

Açıklama:

auto-fit ile mevcut alana sığan kadar sütun oluşturulur; minmax(200px, 1fr) ile sütun minimum 200px, maksimum ise kalan alanın payına göre büyür.
Ek olarak basit bir media query ile (ör. 600px altı) tek sütunlu bir görünüm zorlanabilir; bu, küçük ekranlarda okunabilirliği artırır.

Uygulamada Hızlı İpuçları ve En İyi Uygulamalar

Önce maketi (wireframe) düşünün: grid-template-areas, görsel olarak eşleşme sağlar.
Küçük bileşenleri grid item olarak düşünün; gerektiğinde her öğeye kendi grid davranışı atanabilir.
Gap kullanımı daha okunaklı ve bakımı kolay düzenler sağlar; margin ile aşırı karışıklığa yol açmamak için gap tercih edilebilir.
fr birimini kullanarak esnek sütunlar tanımlayın; sabit genişlik gerektiğinde px veya minmax kombinasyonu tercih edin.
Responsive davranış için auto-fit/auto-fill + minmax, esnek ve az bakım gerektiren bir yaklaşımdır.

Test ve Tarayıcı Desteği

CSS Grid, modern tarayıcılarda geniş ölçüde desteklenir; detaylı destek ve özellik karşılaştırmaları için MDN’in Grid kılavuzlarına başvurabilirsiniz. Tasarımlarınızı farklı tarayıcılarda ve cihaz boyutlarında test etmek her zaman iyi bir pratiktir; gerekirse daha eski tarayıcılar için basit bir fallback (ör. flexbox veya blok düzen) sağlayabilirsiniz.

Adım Adım Uygulama Kontrol Listesi

Wireframe: Sayfanın bölümlerini (header, sidebar, main, footer) belirleyin.
Grid container oluşturun: container'a display: grid; verin.
Sütunları tanımlayın: grid-template-columns veya repeat(auto-fit, minmax(...)) kullanın.
Gerektiğinde alanları adlandırın: grid-template-areas ile okunabilirlik sağlayın.
Responsive testler: Farklı ekran genişliklerinde davranışı kontrol edin ve gerekirse media query ekleyin.
Accessibility & içerik: Grid düzeni içerik akışını (document flow) değiştirebilir; DOM sırasını ve ekran okuyucu deneyimini test edin.

Sonuç

CSS Grid, karmaşık veya basit layout ihtiyaçları için güçlü ve esnek bir yaklaşımdır. Bu mini örnekler, üç temel kullanım senaryosunu gösterir: sabit sütunlu grid, grid-template-areas ile bölümlenmiş layout ve auto-fit/minmax ile responsive grid. Daha fazla detay ve gelişmiş örnekler için MDN rehberleri iyi bir referans kaynağıdır.

Kaynaklar ve daha fazla okuma:

Hızlı HTML ve CSS Mini Örnekleri: Basit Grid ve Layout