Birkaç yıl önce, bir dashboard oluşturmak için işe koyuldum. Gösterişli bir şey değildi; sadece sabit bir kenar çubuğu, ana içerik alanı ve bir alt bilgi (footer) kısmından ibaretti. Flexbox bariz bir seçenek gibi gelmişti ve başlangıçta düzgün çalışıyordu. Sonra ana bölüme bir satır kart ekledim. Tüm düzen çöktü. Sonraki üç saatimi flex-grow oranlarıyla ve iç içe geçmiş yüzde genişlikleriyle boğuşarak, ne kadar padding çıkarırsam çıkarayım konteynerlerin hizalanmayı reddedişini izleyerek geçirdim. Sayfa, her an yıkılmaya hazır bir kule gibi hissettiriyordu.

Bu sarsıcı deneyim bana modern CSS düzeni hakkında en önemli şeyi öğretti: Flexbox ve Grid rakip değildir. Bunlar farklı işler için tasarlanmış araçlardır ve çoğu başarısız düzen, yanlış aracı kullanmaktan kaynaklanır.

Fark Boyutsaldır

Flexbox'ı bir koridor gibi düşünün. Öğeler tek bir yönde, ya bir satır ya da bir sütun olarak akar. Tek boyutlu dağılım için tasarlanmıştır. Tarayıcı içeriğe bakar, ardından içeriği o tek eksen boyunca nasıl genişleteceğine, daraltacağına veya hizalayacağına karar verir. Bu durum Flexbox'ı, içeriğin düzeni belirlediği durumlar için mükemmel kılar. Bir navigasyon çubuğu, bir form alanı yığını veya eşit boşluklara ihtiyaç duyan bir etiket seti, tek bir mantık hattını paylaştıkları için bir flex konteynerine doğal bir şekilde yerleşir.

Grid ise bir kat planıdır. Kesinlikle iki boyutludur; satırları ve sütunları aynı anda yönetir. Önce yapıyı tanımlarsınız, ardından öğeleri içine yerleştirirsiniz. Bu, Grid'i genel sayfa mimarisi için ideal kılar; yani dikey ve yatay konumlandırmayı birlikte kontrol etmeniz gereken her yer için. Karmaşık, iki boyutlu bir tasarımı iç içe geçmiş Flexbox konteynerleri aracılığıyla zorlamaya çalıştığınızda; derin işaretlemeler (markup), kırılgan sarmalayıcılar ve en ufak bir ek eleman eklendiğinde dağılan hassas matematiksel hesaplamalarla karşı karşıya kalırsınız.

Flexbox Hala Hak Ettiği Yeri Koruyor

Her flex konteynerını Grid ile değiştirmek için acele etmeyin. Bireysel bileşenlerin içinde Flexbox genellikle daha temiz ve daha dürüst bir yaklaşımdır. Eğer iki düğmesi olan bir kart alt bilgisi (footer) varsa ve birini sola, diğerini sağa hizalamak istiyorsanız, justify-content: space-between tam olarak istediğinizi yapar. Bilinmeyen bir yüksekliğe sahip bir düğme içindeki bir simgeyi dikey olarak ortalamanız gerekiyorsa, align-items: center en basit yoldur. Farklı isim uzunluklarına sahip kullanıcı rozetleri satırı gibi değişken içerikler, Flexbox içinde rahatça yer bulur çünkü Flexbox içerik önceliklidir. Konteyner, içinde tuttuğu şeye uyum sağlar.

Grid ise konteyner önceliklidir. Tarayıcıya kaç kanal (track) olduğunu ve bunların ne kadar büyük olması gerektiğini söylersiniz, ardından öğeleri bu hücrelere bırakırsınız. Eğer düzeniniz sadece alanı paylaşan tek bir satır kardeş öğeden ibaretse, Grid gereksiz bir karmaşıklık yaratır.

Sayfa Düzeni Grid'e Aittir

Grid'in devraldığı yer burasıdır. Dashboard kabusumu hatırlıyor musunuz? Yapının en başından itibaren şöyle görünmesi gerekirdi:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}

.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }

Neler olduğuna bakın. .page konteyneri üç satır ve iki sütun oluşturur. İlk satır, auto sayesinde header'ın içeriğine göre boyutlanır. Orta satır, 1fr ile kalan tüm boşluğu kaplar. Footer, kendi içeriğine göre boyutlanarak son satıra yerleşir. Bu sırada sidebar 200 piksel genişliğe sabitlenir ve ana alan geri kalan kısmı doldurur.

Yerleşim mantığı asıl rahatlatıcı kısımdır. Header, sütun çizgisi 1'den -1'e kadar uzanır; bu da daha sonra kaç sütun eklerseniz ekleyin, her iki sütunu da kapsayacağı anlamına gelir. Sidebar ve ana içerik 2. satırı paylaşır ancak ayrı sütunlarda yer alırlar. Footer, 3. satırda tam genişliğe döner. Alt öğelerde yüzde hesaplamalarına ihtiyacınız kalmaz. Yükseklik için birbiriyle yarışan iç içe sarmalayıcılara ihtiyacınız olmaz. Sidebar genişliğini tek bir yerden değiştirin ve ana alan otomatik olarak ayarlanır. Tüm düzen tek bir sistem gibi nefes alır.

grid-template-areas ile Okunabilirlik

Daha da fazla netlik için bölümlerinize isim verebilirsiniz. Çizgi numaralarını yönetmek yerine görsel bir harita yazarsınız:

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }

Artık stil dosyanız bir tel kafes (wireframe) gibi okunuyor. Eğer farklı bir breakpoint için sidebar'ın sağda görünmesini isterseniz, template string içindeki iki kelimenin yerini değiştirmeniz yeterlidir. Bu tür bir yapısal okunabilirliği, iç içe geçmiş flex konteynerları kulesi içinde başarmak imkansızdır.

İki Zor Ders

Grid sihir değildir. Düzeninizi hızla mahvedecek iki hata vardır.

Birincisi, özensiz birim kullanımıdır. Eğer grid-template-columns: 1fr 1fr 1fr şeklinde bir tanımlama yaparsanız ancak tasarımınız yalnızca iki sütunluk içeriğe ihtiyaç duyuyorsa, o üçüncü iz hâlâ orada duracaktır. Ya boş kalacak ve beklemediğiniz bir boşluk yaratacak ya da gerçek içeriğinizi tasarımınızı bozacak şekilde sıkışmaya zorlayacaktır. Bilinçli olun. İki sütun kastettiğinizde, repeat(2, 1fr) yazın.