Grid ve Flex Yapılarla Esnek Sayfa Düzenleri Oluşturma Teknikleri

Günümüzde web sitelerinin ve uygulamalarının farklı ekran boyutlarına ve cihazlara uyum sağlaması büyük önem taşıyor. Esnek sayfa düzenleri, içeriğin farklı ekranlarda doğru ve okunabilir bir şekilde görüntülenmesini sağlayarak kullanıcı deneyimini iyileştirir. Bu makalede, CSS Grid ve Flexbox'ın esnek sayfa düzenleri oluşturmak için nasıl kullanılabileceğini ayrıntılı bir şekilde inceleyeceğiz.

CSS Grid Layout: İki Boyutlu Düzenleme Gücü

CSS Grid Layout, web sayfalarını iki boyutlu (satır ve sütun) bir ızgara sistemine dayalı olarak düzenlemek için tasarlanmıştır. Bu, karmaşık düzenleri oluşturmak için son derece güçlü ve esnek bir araçtır. Grid, bir kapsayıcı (container) ve bu kapsayıcının içindeki öğelerden (items) oluşur. Kapsayıcı üzerinde satır ve sütunlar tanımlanarak, öğelerin bu ızgara hücrelerine yerleşimi kontrol edilir.

Grid Kapsayıcısı Tanımlama ve Izgara Oluşturma

Bir HTML öğesini Grid kapsayıcısı olarak tanımlamak için `display: grid;` özelliğini kullanırız. Ardından, `grid-template-columns` ve `grid-template-rows` özellikleri ile ızgaranın sütunlarını ve satırlarını tanımlayabiliriz. Örneğin:


<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>


.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Üç eşit sütun */
  grid-template-rows: auto auto; /* İki satır, yüksekliği içeriğe göre */
}

.item {
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
}

Bu örnekte, `.container` sınıfına sahip div öğesi bir Grid kapsayıcısı olarak tanımlanmıştır. `grid-template-columns: 1fr 1fr 1fr;` satırı, ızgarada üç eşit genişlikte sütun oluşturur. `fr` birimi, kalan alanı orantılı olarak paylaşan bir esnek uzunluk birimidir. `grid-template-rows: auto auto;` satırı ise iki satır oluşturur ve satırların yüksekliği içeriğe göre otomatik olarak ayarlanır.

Grid Öğelerini Yerleştirme

Grid öğelerini ızgaraya yerleştirmek için `grid-column-start`, `grid-column-end`, `grid-row-start` ve `grid-row-end` özelliklerini kullanabiliriz. Bu özellikler, bir öğenin hangi sütundan başlayıp hangi sütunda bittiğini ve hangi satırdan başlayıp hangi satırda bittiğini belirtir. Ayrıca, `grid-column` ve `grid-row` kısaltma özelliklerini de kullanabiliriz.


.item1 {
  grid-column: 1 / 3; /* 1. sütundan başla, 3. sütuna kadar (3. sütun dahil değil) */
}

Bu örnekte, `.item1` sınıfına sahip öğe, 1. sütundan başlayıp 3. sütuna kadar (2 sütun genişliğinde) yerleştirilmiştir.

Grid Alanları (Grid Areas)

Daha karmaşık düzenler için, Grid alanlarını tanımlayabilir ve öğeleri bu alanlara yerleştirebiliriz. `grid-template-areas` özelliği ile ızgaradaki hücrelere isimler atayabiliriz. Ardından, `grid-area` özelliği ile öğeleri bu isimlendirilmiş alanlara yerleştirebiliriz.


.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header header"
    "sidebar content ads"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.ads {
  grid-area: ads;
}

.footer {
  grid-area: footer;
}

Bu örnekte, bir başlık (header), kenar çubuğu (sidebar), içerik (content), reklam alanı (ads) ve alt bilgi (footer) içeren bir düzen oluşturulmuştur. Her alan, `grid-template-areas` içinde tanımlanan isme göre yerleştirilmiştir.

Flexbox: Tek Boyutlu Düzenleme Esnekliği

CSS Flexbox (Flexible Box Layout), öğeleri tek bir boyut (satır veya sütun) üzerinde düzenlemek için tasarlanmıştır. Flexbox, öğelerin boyutlarını, sıralarını ve hizalamalarını kontrol etmek için esnek bir yol sunar. Genellikle, menüler, navigasyon çubukları ve küçük bileşenlerin düzenlenmesi için idealdir.

Flex Kapsayıcısı Tanımlama

Bir HTML öğesini Flex kapsayıcısı olarak tanımlamak için `display: flex;` veya `display: inline-flex;` özelliklerini kullanırız. `display: flex;` öğesi bir blok seviyesinde Flex kapsayıcısı oluştururken, `display: inline-flex;` öğesi bir satır içi Flex kapsayıcısı oluşturur.


<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>


.container {
  display: flex;
}

.item {
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
}

Bu örnekte, `.container` sınıfına sahip div öğesi bir Flex kapsayıcısı olarak tanımlanmıştır. Varsayılan olarak, Flex öğeleri yatay olarak yan yana sıralanır.

Flexbox Yönü (flex-direction)

`flex-direction` özelliği, Flex öğelerinin hangi yönde sıralanacağını belirler. Değerleri şunlardır: `row` (varsayılan, yatay), `column` (dikey), `row-reverse` (yatay ters), `column-reverse` (dikey ters).


.container {
  display: flex;
  flex-direction: column; /* Öğeleri dikey olarak sırala */
}

Flexbox Sarma (flex-wrap)

`flex-wrap` özelliği, Flex öğelerinin kapsayıcıya sığmadığında nasıl davranacağını belirler. Değerleri şunlardır: `nowrap` (varsayılan, öğeler tek bir satırda kalır), `wrap` (öğeler birden fazla satıra sarılır), `wrap-reverse` (öğeler birden fazla satıra ters sırada sarılır).


.container {
  display: flex;
  flex-wrap: wrap; /* Öğeler sığmadığında alt satıra geçsin */
}

Flexbox Hizalama (justify-content ve align-items)

`justify-content` özelliği, Flex öğelerini ana eksen boyunca nasıl hizalayacağını belirler. Değerleri şunlardır: `flex-start` (varsayılan, öğeler başlangıca hizalanır), `flex-end` (öğeler sona hizalanır), `center` (öğeler merkeze hizalanır), `space-between` (öğeler eşit aralıklarla dağıtılır, ilk ve son öğe kenarlara yaslanır), `space-around` (öğeler eşit aralıklarla dağıtılır, her öğenin etrafında eşit boşluk bulunur), `space-evenly` (öğeler eşit aralıklarla dağıtılır, kenarlara da eşit boşluk bırakılır).

`align-items` özelliği, Flex öğelerini çapraz eksen boyunca nasıl hizalayacağını belirler. Değerleri şunlardır: `flex-start` (öğeler başlangıca hizalanır), `flex-end` (öğeler sona hizalanır), `center` (öğeler merkeze hizalanır), `baseline` (öğeler taban çizgisine göre hizalanır), `stretch` (varsayılan, öğeler kapsayıcının yüksekliğine kadar uzar).


.container {
  display: flex;
  justify-content: center; /* Yatayda ortala */
  align-items: center; /* Dikeyde ortala */
}

Flex Öğeleri Boyutlandırma (flex-grow, flex-shrink, flex-basis)

`flex-grow` özelliği, bir Flex öğesinin kapsayıcıda kalan boş alanı ne kadar dolduracağını belirler. `flex-shrink` özelliği, bir Flex öğesinin kapsayıcıya sığmadığında ne kadar küçüleceğini belirler. `flex-basis` özelliği, bir Flex öğesinin başlangıç boyutunu belirler.


.item {
  flex-grow: 1; /* Kalan alanı eşit olarak paylaş */
}

Grid ve Flexbox'ı Birlikte Kullanmak

Grid ve Flexbox, birlikte kullanıldığında daha da güçlü hale gelir. Grid, genel sayfa düzenini oluşturmak için idealdirken, Flexbox küçük bileşenlerin ve içeriklerin düzenlenmesi için kullanılabilir. Örneğin, bir web sitesinin ana yapısını Grid ile oluşturabilir ve her bir Grid hücresinin içindeki öğeleri Flexbox ile düzenleyebilirsiniz.

Sonuç

CSS Grid ve Flexbox, modern web geliştirmenin temel taşlarıdır. Esnek ve duyarlı sayfa düzenleri oluşturmak için güçlü ve esnek araçlar sunarlar. Bu makalede, Grid ve Flexbox'ın temel kavramlarını ve kullanım örneklerini inceledik. Bu bilgileri kullanarak, farklı ekran boyutlarına ve cihazlara uyum sağlayan, kullanıcı dostu web siteleri ve uygulamaları geliştirebilirsiniz. Pratik yaparak ve farklı düzenler deneyerek, bu teknolojilerin sunduğu olanakları tam olarak keşfedebilirsiniz.