CSS'de Yüzdelerle İlgili Sorun

Kısa bir süre önce, genişlikler ve yükseklikler için tamamen yüzdeleri kullanmaya güveniyorduk. Yüzdeleri kullanmak, mizanpajınızın ve öğelerinizin görüntü alanına göre bir yükseklik ve genişlik alabileceği anlamına geliyordu. Ancak modern CSS gelişmeye devam ettikçe, yüzdeleri kullanmaktan kaçınmanın bile iyi bir fikir olabileceği bir noktaya geldik.

Yüzdeleri kullanırken karşılaşacağınız yaygın sorunlar hakkında bilgi edinin. Ayrıca yüzdeler yerine kullanılacak modern CSS teknikleri hakkında bilgi edinin. Bu teknikler size herhangi bir dezavantaj olmadan yüzdelerle aynı sonucu verecektir.

Çok Basit Bir Izgara Örneği

Yüzde birimleriyle ilgili bir sorunu göstermek için şu HTML düzenini göz önünde bulundurun:

<divsınıf="konteynerızgaram">
 <divsınıf="ızgara öğesi">
div>
 <divsınıf="ızgara öğesi">
div>
div>

Dış eleman bir temeldir div iki ile konteyner elemanı div çocuklar. Her çocuğun bir ızgara öğesi sınıf. Kabı iki sütunlu (iki kutu) bir ızgaraya dönüştürmek için aşağıdaki CSS kodunu uygulamamız gerekecek:

vücut {
arka plan rengi: siyah;
hizalama öğeleri: merkez;
haklı içerik: esnek başlangıç;
}
.my-grid {
görüntülemek: Kafes;
ızgara-şablon-sütunları: 50% 50%;
marj: 3rem;
sınır: 2pikselsağlamaltın;
dolgu malzemesi: 1rem;
}
.grid öğesi {
sınır: 3pikselsağlamaltın;
dolgu malzemesi: 10rem 0;
arka plan: mavi;
}

Bu nedenle, her sütun (ızgara öğesi) altın arka plan rengine sahiptir. Konteyner ebeveyn sınıfında, ızgara-şablon-sütun her sütun için %50'ye kadar. Sonuç olarak, her iki kutu da kapsayıcı öğenin toplam genişliğinin %50'sini kaplar.

İşte sonuç:

Ancak bu uyumla ilgili sorunlar var. İlk olarak, bir eklemeye karar verdiyseniz açıklık ızgara ebeveyne, çocuk yandan taşabilir. Örneğin, eklemek isteseydiniz boşluk: 3 piksel için .my-grid engelle, sonra düzen şu şekilde görünür:

Yukarıdaki resimde görebileceğiniz gibi, sağdaki kutu kabın dışına taşınmıştır. Bazen boşluğunuz yeterince küçük olduğu için bunu fark etmeyebilirsiniz, bu da garip bir hizalama sorununa neden olur. Ancak daha büyük bir boşluğunuz varsa, örtüşme oldukça belirgin hale gelir.

Yüzdeleri kullandığınızda ve kenar boşlukları veya boşluklar eklediğinizde, bu tür hatalarla karşılaşma olasılığı çok yüksektir. Ancak hata neden oluşuyor?

Bunun nedeni, her sütunun üst öğenin %50'si olmasıdır. Yukarıdaki örnekte, kutuyu kabın dışına iten %50 artı %50 artı boşluğa (3px) sahibiz.

Bu hatanın sadece 50-50 ile gerçekleşmediğini unutmayın. İlk sütunu %75'e, ikinci sütunu %25'e ayarlayabilirsiniz ve hata yine de oluşur. Bu nedenle aşağıdaki çözümü daha sık kullanmanız gerekiyor.

Kesirli Değerlerle Çözüm

Çözüm, yüzdeler yerine kesirli değerler kullanmaktır. Böylece, ilk sütunu %75'e ve ikinciyi %50'ye ayarlamak yerine, ilk sütunu 3fr ve ikinci sütunu 1fr olarak ayarlayabilirsiniz:

ızgara-şablon-sütunları: 3fr 1fr

Bu, ilk örnekle aynı oranı korur. Ama kullanmanın avantajı fr birimler, mevcut alanın bir kısmını kullanıyor olmalarıdır. Bu durumda, birinci sütun boşluğun üç parçasını, ikinci sütun boşluk hariç bir bölümünü alacaktır.

Yüzdelere göre frs kullanmanın başka bir avantajı—ya da diğer px veya em gibi mutlak birimler—bunları sabit değerlerle birleştirebilmenizdir. İşte bir örnek:

ızgara şablonu sütunları: 1fr 10rem;

Yukarıdaki kodla, ekran boyutundan bağımsız olarak asla değişmeyen sabit bir değer elde edeceksiniz. Bunun nedeni, sağdaki sütunun her zaman 10rem'de kalması, soldaki sütunun ise kalan alanı (eksi boşluk) işgal etmesidir.

Bazen yüzdeleri kullanmaktan kurtulabilirsiniz. Ancak bunları yine de duruma uyum sağlayabilecek akıllı şekillerde kullanmalısınız. Çoğu zaman bu, onları bir fr değer.

Daha Gerçekçi Bir Örnek

Ana içerik alanı ve bir kenardan (ilgili gönderiler için) oluşan bir sayfanız olduğunu düşünelim. Ana içerik alanı ekranın üç bölümünü kaplarken, kenar boşluk eksi kalan alanı kaplar:

.konteyner {
Genişlik: 100%;
görüntülemek: Kafes;
ızgara-şablon-sütunları: 3fr 1fr;
açıklık: 1.5rem;
}
.kart {
arka plan rengi: #5A5A5A;
dolgu malzemesi: 10piksel;
kenar boşluğu: .5rem;
}

İşte sonuç:

Tipik olarak, ekran çok daraldığında kenar çubuğunu (veya kenara) sayfanın altına (veya üstüne) taşırsınız. Bu, görüntü alanı belirli bir kesme noktasına ulaştığında her şeyi üst üste istifleyen medya sorguları ayarlamak anlamına gelir.

Görüntü alanı 55em veya altına düştüğünde her şeyi bir sütuna şu şekilde yığabilirsiniz:

@medya(maksimum genişlik: 55em) {
.konteyner {
görüntülemek: esnek;
esnek yön: kolon;
 }
}

Ve sonuç şöyle bir şeye benzeyecek:

Artık her kartın tüm görünümün genişliğini kaplamasını istemiyorsunuz. Bunun yerine kartlar yan yana görüntülenmelidir. Bunu başarmanın en iyi yolu CSS ızgaralarıdır. Ancak grid-şablon-sütun için sabit genişlik değerleri (%50 gibi) ayarlamak yerine, tekrarlamak() aşağıdaki gibi işlev:

.sidebar-grid {
görüntülemek: Kafes;
ızgara-şablon-sütunları: tekrarlamak(otomatik sığdırma, en az en çok(25rem, 1fr));
hizalama içeriği: başlangıç;
açıklık: 2rem;
}

Bu CSS, minimum boyutu 25rem ve maksimum boyutu 1fr olarak ayarlar. Bu yaklaşım, içsel boyutlandırmaya dayandığından sabit genişlikler ayarlamaktan çok daha iyidir. Başka bir deyişle, tarayıcının mevcut parametrelere göre bazı şeyleri anlamasına olanak tanır.

Artık tarayıcı penceresini belirli bir genişliğe indirdiğinizde, ızgara kutusu otomatik olarak satır başına iki kutu olacak şekilde yeniden ayarlanır.

Ekran küçüldüğünde, satır başına bir kutuya düşer. Böylece tarayıcı her şeyi üst üste istifler. Tüm bunlar siz pencereyi yeniden boyutlandırırken gerçekleşir. gibi bir tarayıcı özelliği kullanabilirsiniz. Bu CSS'nin nasıl çalıştığını anlamak için Chrome DevToolsve pencereleri yeniden boyutlandırmanın düzeni nasıl değiştirdiği.

En iyi yanı, öğeyi duyarlı hale getirmek için bir kapsayıcı sorgusuna veya süslü herhangi bir şeye ihtiyacınız olmamasıdır. Basitçe bir ızgara ayarlayın ve kullanın en az en çok() sabit boyutlar yerine kesirli değerler ayarlamak için.

CSS Izgarası Hakkında Daha Fazla Bilgi Edinin

CSS ile harika olmak istiyorsanız, CSS Izgaraları hakkında derin bilgiye sahip olmanız gerekir. Izgaralar iyi kullanıldığında oldukça güçlü olabilir. Izgaraları kullanarak istediğiniz hemen hemen her düzeni elde edebilirsiniz. Bu, onu CSS'de vazgeçilmez bir araç haline getirir.

CSS ızgaralarını kullanırken akılda tutulması gereken bir şey, yanıt verebilirliğe odaklanmaktır. Öğeler arasında çarpışma durumlarını önlemek için kesirli yaklaşımı da kullanabilirsiniz. Düzen stili, web siteleri oluştururken size son derece yardımcı olacağından, CSS ızgaralarında ustalaşmayı unutmayın.