CSS fr nedir?

CSS’te fr, özellikle grid-template-columns ve grid-template-rows içinde kullanılan, ızgarada dağıtılabilir alanın bir payını ifade eden esnek uzunluk birimidir. Örneğin 1fr 2fr, uygun alanı iki sütun arasında 1’e 2 oranında paylaştırır. fr piksel gibi sabit bir ölçü değildir; kapsayıcının kullanılabilir boyutuna göre hesaplanır.

fr nasıl çalışır?​

Tarayıcı önce sabit genişlikleri, içerik için gereken alanı ve sütunlar arasındaki gap değerlerini dikkate alır. Geriye kalan dağıtılabilir alan, fr birimleri arasında paylaştırılır.

Örneğin 900 piksel genişliğinde bir grid kapsayıcısında iki sütun 1fr 2fr ve arada 30 piksel boşluk varsa, boşluk çıkarıldıktan sonra kalan alan 1’e 2 oranında bölünür. İçerik minimumlarının bu oranı sınırlamadığı örnekte ilk sütun 290, ikinci sütun 580 piksel olur. Bu değerler kapsayıcının gerçek genişliğine göre değişir.

repeat(3, 1fr) ise üç eşit esnek sütun oluşturur. Sütunlar eşit genişlikte görünse de uzun ve bölünemeyen içerik, varsayılan minimum boyut nedeniyle beklenenden daha geniş davranabilir.

Uygulanabilir en küçük örnek​

Aşağıdaki örnek, 1’e 2 oranında iki sütun oluşturur:


Uygulamak için:

1. HTML’de aynı kapsayıcı içine iki öğe yerleştirin.
2. Kapsayıcıya display: grid verin.
3. Sütun oranını grid-template-columns: 1fr 2fr ile tanımlayın.
4. Tarayıcıda kapsayıcı genişledikçe ikinci sütunun birincinin yaklaşık iki katı genişlediğini kontrol edin.

Başarı sonucu, iki sütunun aynı satırda görünmesi ve ikinci sütunun kullanılabilir alanın daha büyük payını almasıdır. Sütunlar taşarsa önce uzun kelime, geniş görsel veya white-space: nowrap gibi içerik kısıtlarını inceleyin; sorun her zaman fr değerinden kaynaklanmaz.

fr hangi durumda kullanılmalı?​

Kararı şu şekilde verebilirsiniz:


Sabit bir kenar çubuğu ve kalan alanı dolduran içerik istiyorsanız 240px 1fr gibi bir tanım kullanın. Sütunların dar ekranlarda alt alta geçmesini istiyorsanız, dar bir ekran için ayrı bir medya sorgusunda grid-template-columns: 1fr tanımlayın.

Sık yapılan hatalar​

fr değerini piksel sanmak: 1fr, her durumda belirli bir piksel genişliği vermez. Kapsayıcı genişliği değiştiğinde sütun da değişir.

Toplamı 1 yapmak zorunda olduğunu düşünmek: 1fr 3fr toplamı dört paydır ve geçerlidir. Toplam esneklik katsayısı en az 1 olduğunda ve içerik minimumları izin verdiğinde oranlı paylaştırma yapılır. Toplamı 1’den küçük fr değerleri, boş alanın yalnız bir kısmını talep edebilir; örneğin 0.25fr değerli üç sütun tüm boşluğu doldurmak zorunda değildir.

Gapsiz hesap yapmak: gap değeri de alan kullanır. Bu nedenle üç adet 1fr sütun, kapsayıcının toplam genişliğinin tam üçte biri kadar olmayabilir.

Taşmayı yalnızca fr ile çözmeye çalışmak: Uzun içerik için gerekirse grid öğesinde min-width: 0 kullanın. Bu, öğenin grid alanı içinde küçülebilmesine izin verir; ancak metnin nasıl sarılacağını ayrıca kontrol etmeniz gerekebilir.

Kaynaklar​

• W3C: Grid esnek fr uzunlukları

Sık sorulan sorular​

fr ile yüzde arasındaki temel fark nedir?​

Yüzde, doğrudan kapsayıcının boyutuna göre hesaplanır. fr ise sabit genişlikler ve boşluklar çıkarıldıktan sonra kalan grid alanını paylaştırır. Bu nedenle 200px 1fr gibi tanımlarda özellikle kullanışlıdır.

fr flexbox içinde kullanılabilir mi?​

Hayır. fr CSS Grid’in birimidir. Flexbox’ta benzer esnek davranış için flex-grow, flex veya uygun genişlik kuralları kullanılır.

fr kullandığım halde sütun neden taşabiliyor?​

Grid öğesinin minimum boyutu, uzun veya bölünemeyen içeriğin genişliği ve sabit genişlikteki alt öğeler taşmaya neden olabilir. Önce sorunlu içeriği bulun; gerekli durumda grid öğesine min-width: 0 verin ve görsellerin kapsayıcıya uyup uymadığını kontrol edin. İz için minmax(0, 1fr) tanımı da otomatik minimum yerine 0 sınırı seçer; kesilmeyen uzun metni ayrıca sarmalamalısınız.