CSS Grid Layout Nasıl Kullanılır minmax ()
CSS Izgara Düzeni Modülü bir araya getirerek bir sonraki seviyeye duyarlı tasarım alır. yeni tür esneklik bu daha önce hiç görülmedi. Şimdi sadece yapamayız özel ızgaraları tanımla sadece saf CSS ile cayır cayır yanan hızlı ama CSS Grid ayrıca birçok gizli mücevher bu, şebekeyi daha da ince ayarlamamızı ve karmaşık düzenler elde etmemizi sağlar..
en az en çok() fonksiyon bu daha az bilinen özelliklerden biridir. Izgara izinin boyutunu tanımlamayı mümkün kılar minimum ila maksimum aralık Böylece, şebekenin her kullanıcının görünümüne mümkün olan en iyi şekilde adapte olabilmesi için.
Sözdizimi
Sözdizimi en az en çok() fonksiyon nispeten basittir, sürer iki argüman: minimum ve maksimum değer:
minmax (min, maks)
min değer daha küçük olmalı den maksimum, aksi takdirde maksimum tarayıcı tarafından göz ardı edilir.
Kullanabiliriz en az en çok() işlevi değeri Izgara şablon sütunlar veya Izgara şablon satır mülk (veya her ikisi de). Örneğimizde, çok daha sık kullanılan bir durum olduğundan, eskisini kullanacağız..
.konteyner ekran: ızgara; ızgara şablonu şablon sütunları: minmax (100px, 200px) 1fr 1fr; ızgara-şablon satırları: 100 piksel 100 piksel 100 piksel; ızgara aralığı: 10 piksel;
Aşağıdaki Codepen demosunda, HTML ve CSS kodu makale boyunca kullanacağız.
Kullanabiliriz farklı tür değerler içinde en az en çok() işlev, tüm ne tür özel ızgara oluşturmak istediğimize bağlı.
Statik uzunluk değerleri
Bunu nasıl kullanabileceğimizin iki temel yolu vardır. en az en çok() ile işlev statik uzunluk değerleri.
İlk önce kullanabiliriz en az en çok() sadece bir ızgara sütunu için ve diğer sütunların genişliğini basit statik değerler olarak tanımlayın (burada piksel).
ızgara şablonu şablon sütunları: minmax (100px, 200px) 200px 200px;
Aşağıdaki gif demosunda, bu düzenin duyarlı değil, ancak ilk sütun biraz esneklik. İkinci ve üçüncü sütunlar sabit genişliklerini (200px) korurken, ilk sütun 100px ile 200px arasında değişmektedir., kullanılabilir alana göre.
İkincisi, genişliğini tanımlayabiliriz birden fazla ızgara sütunu kullanma en az en çok(). Min ve max değerlerinin her ikisi de statiktir, bu nedenle varsayılan olarak ızgara duyarlı değil. Ancak, sütunların kendileri esnek, ama sadece 100px ile 200px arasında. Onlar aynı anda büyümek ve küçülmek görünüm boyutunu değiştirdikçe.
ızgara şablonu şablon sütunları: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px);
Biz de yapabiliriz unutmayın kullan tekrar et() fonksiyon birlikte en az en çok(). Böylece, önceki kod pasajı da şöyle yazılabilir:
ızgara şablonu şablon sütunları: tekrar (3, minmax (100px, 200px));
Dinamik uzunluk değerleri
Statik değerler dışında, en az en çok() işlev ayrıca kabul eder yüzde birimleri ve yeni kesir (fr) birimi argümanlar olarak. Bunları kullanarak, her ikisi de özel ızgaralar elde edebilirsiniz duyarlı ve boyutlarını değiştir mevcut alana göre.
Aşağıdaki kod, ilk sütunun genişliğinin olduğu bir ızgarayla sonuçlanır. % 50 ile% 80 arasında değişmektedir ikinci ve üçüncü kalan alanı eşit olarak paylaş.
ızgara şablonu şablon sütunları: minmax (% 50,% 80) 1fr 1fr;
İle dinamik değerler kullandığımızda en az en çok() fonksiyonu, ayarlamak için çok önemlidir mantıklı olan kural. Size bir örnek göstereyim. ızgara parçalanıyor:
ızgara şablonu şablon sütunları: minmax (1fr, 2fr) 1fr 1fr;
Bu kural, tarayıcı olduğu gibi bir anlam ifade etmiyor. karar verememek hangi değere atanacak en az en çok() işlevi. Asgari değer bir 1fr 1fr 1fr sütun genişliği, maksimum 2fr 1fr 1fr. Ancak, her ikisi de çok küçük bir ekranda bile mümkündür. Orada tarayıcı ile ilgili hiçbir şey.
İşte sonuç:
Statik ve dinamik değerleri birleştirin
Mümkün statik ve dinamik değerleri birleştir. Örneğin, yukarıdaki Codepen demosunda, minmax (100px, 200px) 1fr 1fr; ilk sütunun bulunduğu bir ızgarada sonuçlanan kural 100 piksel ve 200 piksel arasında değişir ve kalan alan diğer ikisi arasında eşit paylaşılan.
ızgara şablonu şablon sütunları: minmax (100px, 200px) 1fr 1fr;
Vitrinin büyümesiyle ilk sütunun 100px'den 200px'e çıktığını gözlemlemek ilginçtir. Fr birimi tarafından yönetilen diğer ikisi büyümeye başlar sadece ilki maksimum genişliğe ulaştıktan sonra. Bu, mantıksaldır, çünkü kesir biriminin amacı, kullanılabilir (kalan) alanı bölmektir..
Min içerik, max-içerik, ve Oto anahtar kelimeler
Orada bir üçüncü tür değer biz atayabiliriz en az en çok() işlevi. Min içerik, max-içerik, ve Oto anahtar kelimeler, bir ızgara izinin boyutları ile içerdiği içerik.
max-içerik
max-içerik anahtar kelime tarayıcıyı kılavuz sütununun olması gerektiği gibi yönlendirir içerdiği en geniş eleman kadar geniş.
Aşağıdaki demoda, bir 400 piksel genişliğinde görüntü ilk izlemenin içinde ve aşağıdaki CSS kuralını kullandı (makalenin sonunda değiştirilmiş kodun tamamını içeren bir Codepen demosu bulabilirsiniz):
.konteyner ızgara-şablon-sütunlar: max-içerik 1fr 1fr; / ** * minmax () notasyonu ile aynıdır: * grid-template-column: minmax (max içerik, max içerik) 1fr 1fr; * /
Kullanmadım en az en çok() Henüz gösterilmemiş, ancak yukarıdaki kod yorumunda aynı kodun onunla nasıl görüneceğini görebilirsiniz (burada gereksiz olmasına rağmen).
Görebileceğiniz gibi, ilk ızgara sütunu en geniş elemanı kadar geniş (burada görüntü). Bu şekilde, kullanıcılar her zaman görüntüyü görebilir tam boyutlu. Ancak, belirli bir görünüm alanı boyutunda, bu düzen duyarlı değil.
Min içerik
Min içerik anahtar kelime tarayıcıyı ızgara sütununun geniş olması gerektiği kadar yönlendirir. içerdiği en dar eleman, bir şekilde taşma yol açmaz.
İlk sütunun değerini değiştirirsek, görüntülü önceki demonun nasıl göründüğünü görelim. Min içerik:
.konteyner ızgara-şablon-sütunlar: min-içerik 1fr 1fr; / ** * minmax () notasyonu ile aynıdır: * ızgara şablonu şablon sütunları: minmax (min içeriği, min içeriği) 1fr 1fr; * /
İlk ızgara hücresinin tam boyutunu görebilmeniz için resmin altındaki yeşil arka planı bıraktım.
Görebileceğiniz gibi, ilk sütun en küçük genişliği korur taşma olmadan elde edilebilir. Bu örnekte, bu, 4. ve 7. ızgara hücrelerinin minimum genişliği ile tanımlanacaktır. dolgu malzemesi ve yazı Boyutu özellikleri, ilk hücrede görüntü olarak sıfıra büzülmüş olabilir taşma olmadan.
Izgara hücresi bir metin dizesi içeriyorsa, Min içerik olabilir en uzun kelimenin genişliğine eşit, taşma olmadan daha fazla küçültülemeyen en küçük eleman budur. İşte BitsOfCode tarafından yazılan harika bir makale. Min içerik ve max-içerik ızgara hücresi bir metin dizesi içerdiğinde davranır.
kullanma Min içerik ve max-içerik birlikte
Eğer biz kullanım Min içerik ve max-içerik birlikte içinde en az en çok() işlevi, şöyle bir ızgara sütununu alırız:
- duyarlı
- taşma yok
- en geniş elemanından daha genişlemiyor
.konteyner ızgara-şablon-sütunlar: minmax (min içerik, maksimum içerik) 1fr 1fr;
Biz de kullanabilirsiniz Min içerik ve max-içerik anahtar kelimeler diğer uzunluk değerleri ile birlikte içinde en az en çok() işlev, kural mantıklı olana kadar. Örneğin, minmax (% 25, maksimum içerik) veya minmax (min içerik, 300px) her ikisi de geçerli kurallar olurdu.
Oto
Sonunda, biz de kullanabilirsiniz Oto anahtar kelime bir argüman olarak en az en çok() fonksiyon.
Ne zaman Oto olduğu maksimum olarak kullanılır, değeri aynı max-içerik.
Olduğu zaman minimum olarak kullanılır, değeri dakika-genişliği / dakika yükseklikte kural, bu demektir ki Oto bazen aynıdır Min içerik, fakat her zaman değil.
Önceki örneğimizde, Min içerik eşit Oto, İlk ızgara kolonunun minimum genişliği her zaman minimum yüksekliğinden daha küçük olduğu için. Yani, ait CSS kuralı:
.konteyner ızgara-şablon-sütunlar: minmax (min içerik, maksimum içerik) 1fr 1fr;
şöyle de yazılmış olabilir:
.konteyner ızgara-şablon-sütunlar: minmax (otomatik, otomatik) 1fr 1fr;
Oto anahtar kelime de olabilir diğer statik ve dinamik birimlerle birlikte kullanılır (piksel, fr birimi, yüzde, vb.) en az en çok() örneğin minmax (otomatik, 300 piksel) geçerli bir kural olurdu.
Nasıl test edebilirsiniz Min içerik, max-içerik, ve Oto anahtar kelimeler ile çalışmak en az en çok() Aşağıdaki Codepen demosunda fonksiyon:
