CSS Izgara Düzeni Fr Birimi Rehberi
CSS Izgara Düzeni Modülü bir ile sevk edildi yeni CSS ünitesi aradı fr birim. Olabildiğince basit, fr o kelimenin kısaltması “kesir”. Yeni birim, ızgarayı orantılı sütunlara veya sıralara hızlıca dilimlemeyi mümkün kılar. Sonuç olarak, oluşturulması tamamen duyarlı ve esnek ızgaralar neredeyse bir esinti olur.
Kesir birimi Grid Layout modülü ile birlikte tanıtıldığından, onu istediğiniz tarayıcıda kullanabilirsiniz. CSS ızgarasını destekler. Eski tarayıcıları da desteklemek istiyorsanız, işte size harika CSS ızgara polyfill Bu sadece kullanmanıza olanak tanıyan fr birim ancak diğer ızgara özellikleri de.
Temel kullanım
İlk önce bir bakalım temel ızgara Kesir birimini kullanır. Aşağıdaki düzen, alanı ikiye böler üç eşit genişlikte sütun ve iki eşit yükseklikte sıra.
Ait HTML altı divs ile işaretlenmiş .Kutu sınıf, içinde .sargı div.
1.2.3.4.5.6.
Izgara Düzeni modülünü kullanmak için ekran: ızgara; Sarmalayıcıya CSS özelliği. Izgara şablon sütunlar özellik kullanır fr değer olarak birim; üç sütunun oranı 1: 1: 1'dir.
Izgara satırları için (Izgara şablon satır özellik), ben kullanmadım fr Birim, yalnızca sarıcı sabit bir yüksekliğe sahip. Aksi takdirde, bazı cihazlarda garip sonuçlar olabilir, ancak o zaman bile fr birim oranı koruyor mu (ve bu çok büyük).
Izgara boşluk özellik 10px ızgara ekler kutuları arasında. Boşluk istemiyorsanız, bu özelliği kaldırın..
.sarmalayıcı ekran: ızgara; ızgara şablonu şablon sütunları: 1fr 1fr 1fr; ızgara-şablon satırları: 200 piksel 200 piksel; ızgara aralığı: 10 piksel; .box renk: beyaz; metin hizalama: orta; yazı tipi boyutu: 30 piksel; dolgu maddesi: 25px;
Yukarıdaki CSS’nin arka plan renkleri gibi bazı temel stiller içermediğini unutmayın. Yapabilirsin makalenin sonunda demoda tam kodu bulmak.
Oranı değiştir
Tabii ki, sadece 1: 1: 1 kullanamazsınız istediğiniz oranı. Aşağıda kullandım 1: 2: 1 kesirler bu da mekanı bölmek üç sütun ancak orta sütun olacak iki katı genişlikte diğer ikisi gibi.
Ben de değerini arttırdım Izgara boşluk Böylece düzeni nasıl değiştirdiğini görebilirsiniz. Temel olarak, tarayıcı ızgara boşluğunu görünüm genişliğinden çıkarır (Bu örnekte, ızgara boşlukları en fazla 80 piksel ekler) ve geri kalanı dilimler verilen kesirlere göre.
.sarmalayıcı ekran: ızgara; ızgara şablonu şablon sütunları: 1fr 2fr 1fr; ızgara-şablon satırları: 200 piksel 200 piksel; ızgara aralığı: 40 piksel;
birleştirmek fr diğer CSS üniteleri ile
Yapabilirsin birleştirmek fr birim diğer CSS üniteleri yanı sıra. Örneğin, aşağıdaki örnekte, ben % 60 1fr 2fr ızgaramın oranı.
Peki bu nasıl çalışıyor? tarayıcı görünüm genişliğinin% 60’ını atar ilk sütuna. Daha sonra, kalan alanı 1: 2 kesir olarak böler.
Aynı şey aynı zamanda yazılmış olabilir % 60 13.33333% 26.66667%. Fakat açıkçası, neden biri bu formatı kullanmak istesin ki? Kesir biriminin büyük bir avantajı kod okunabilirliğini artırır. Ayrıca, bu tamamen doğru, yüzde biçimi hala yalnızca% 99,9999'a kadar eklediğinden.
.sarmalayıcı ekran: ızgara; ızgara şablonu şablon sütunları:% 60 1fr 2fr; ızgara-şablon satırları: 200 piksel 200 piksel; ızgara aralığı: 10 piksel;
Yüzdeleri dışında, diğer CSS birimlerini de kullanabilirsiniz örneğin fraksiyon ünitesi ile birlikte nk, px, em, ve rem.
İle boşluk ekle fr
Ya tasarımınızın darmadağın olmasını istemiyorsanız ve biraz boşluk ekle şebekenize mi? Kesir birimi de bunun için kolay bir çözüme sahiptir.
Gördüğünüz gibi, bu ızgara boş bir sütunu var hala altı kutuyu da tutar. Bu düzen için alanı yukarı kaydırmamız gerekiyor dört sütuna üç yerine. Yani, biz kullanırız 1fr 1fr 1fr 1fr değeri Izgara şablon sütunlar özellik.
Boş sütunu içine ekleriz Izgara şablon alanlar özelliği kullanarak nokta notasyonu. Temel olarak, bu özellik size sağlar başvuru adlı ızgara alanları. Ayrıca, ızgara alanlarını ızgara alanı kullanmanız gereken mülk her alan için ayrı ayrı.
.sarmalayıcı ekran: ızgara; grid-template-column: 1fr 1fr 1fr 1fr; ızgara-şablon satırları: 200 piksel 200 piksel; ızgara aralığı: 10 piksel; ızgara-şablon alanları: "kutu-1 kutu-2. kutu-3" "kutu-4 kutu-5. kutu-6"; .box-1 ızgara alanı: box-1; .box-2 ızgara alanı: box-2; .box-3 ızgara alanı: box-3; .box-4 ızgara alanı: box-4; .box-5 ızgara alanı: box-5; .box-6 ızgara alanı: box-6;
Boşluk alanları mutlaka bir sütun oluşturmak zorunda değilsiniz, onlar herhangi bir yerde olabilir ızgarada.
tekrar et() fonksiyon
Ayrıca kullanabilirsiniz fr birim ile birlikte tekrar et() fonksiyon bir için basit sözdizimi. , sadece basit bir ızgaraya sahipseniz bu gerekli değildir, ancak istediğiniz zaman kullanışlı olabilir karmaşık bir düzen uygulamak, örneğin bir iç içe ızgara.
.sarmalayıcı ekran: ızgara; ızgara-şablon-sütunlar: tekrar (3, 1fr); / * grid-template-column: 1fr 1fr 1fr; * / grid-template-rows: 200px; ızgara aralığı: 10 piksel;
tekrarla (3, 1fr) sözdizimi aynı düzende sonuç gibi 1fr 1fr 1fr. Aşağıdaki düzen ilk örnekte olduğu gibidir..
Eğer sen çarpanı arttır içinde tekrar et() işlevi daha fazla sütun olacak. Örneğin, tekrarla (6, 1fr) sonuçlanır altı eşit sütun. Bu durumda tüm kutularımız aynı sırada olacak, bu, yalnızca bir değer (200px) kullanmak için yeterlidir. Izgara şablon satır özellik.
.sarmalayıcı ekran: ızgara; ızgara-şablon-sütunlar: tekrar (6, 1fr); ızgara-şablon satırları: 200 piksel; ızgara aralığı: 10 piksel;
Kullanabilirsiniz tekrar et() birden fazla. Örneğin, aşağıdaki örnek, son üç sütunun olduğu bir ızgarayla sonuçlanır. iki katı genişlikte ilk üç olarak.
.sarmalayıcı ekran: ızgara; grid-template-column: tekrarla (3, 1fr) tekrarla (3, 2fr); ızgara-şablon satırları: 200 piksel; ızgara aralığı: 10 piksel;
Ayrıca birleştirmek tekrar et() diğer CSS üniteleri ile. Örneğin, kullanabilirsiniz 200 piksel tekrar (4, 1fr) 200 piksel geçerli bir kod olarak.
Eğer nasıl ilgileniyorsanız karmaşık düzenler oluşturun CSS Izgara modülü ile tekrar et() işlev ve fr ünite Rachel Andrew, bunu nasıl yapabileceğiniz konusunda ilginç bir blog yazısına sahip.
Deneme için bir demo
En sonunda, İşte söz verdiğim demo. Bu makaledeki ilk örnekte olduğu gibi aynı kodu kullanır. Çatalla ve ne yapabileceğini gör fr birim.
