CSS Grid elrendezés Minmax használata ()

A CSS Grid Layout Module az a újfajta rugalmasság amit még soha nem látott. Most már csak nem tudjuk egyedi rácsok definiálása csak a tiszta CSS-el ragyogóan gyors, de a CSS Grid is rendelkezik sok rejtett drágakő amely lehetővé teszi számunkra, hogy tovább finomítsuk a rácsot, és bonyolult elrendezéseket érjünk el.

A minimum maximum() funkció az egyik ilyen kevésbé ismert jellemző. Lehetővé teszi a rácspálya méretének meghatározását legalább a maximális hatótávolságig úgy, hogy a rács a lehető legjobban alkalmazkodjon az egyes felhasználók nézetablakához.

Szintaxis

A. \ T minimum maximum() függvény viszonylag egyszerű két érv: minimális és maximális érték:

 minmax (min, max) 

A min érték kisebbnek kell lennie mint a max, másképp max a böngésző figyelmen kívül hagyja.

Használhatjuk a minimum maximum() mint a értéke grid-template-oszlopok vagy grid-template-sorok ingatlan (vagy mindkettő). Példánkban az előbbit használjuk, mivel ez sokkal gyakrabban használatos.

 .konténer kijelző: rács; grid-template-oszlopok: minmax (100px, 200px) 1fr 1fr; rács-sablon sorok: 100px 100px 100px; rács-rés: 10px;  

Az alábbi Codepen demóban megtalálható a HTML és CSS kód használjuk az egész cikket.

Tudjuk használni különböző értékeket benne minimum maximum() függ, mindegyik attól függ, hogy milyen egyedi rácsot kívánunk létrehozni.

Statikus hosszúságú értékek

Két alapvető módja van annak, hogy miként használhatjuk minimum maximum() funkció statikus hosszúságú értékek.

Először is használhatjuk minimum maximum() csak egy rácsoszlop esetén és határozza meg a többi oszlop szélességét egyszerű statikus értékként (pixelek itt).

 grid-template-oszlopok: minmax (100px, 200px) 200px 200px; 

Az alábbi gif demóban láthatja, hogy ez az elrendezés nem reagál, az első oszlop azonban bizonyos rugalmasságot. A második és a harmadik oszlop megtartja a rögzített szélességet (200px), míg az első oszlop 100 és 200 képpont közötti., a rendelkezésre álló hely alapján.

Másodszor, meg tudjuk határozni a szélességét több rácsoszlop használva minimum maximum(). A min és max értékek statikusak, így alapértelmezés szerint a rács nem reagál. Az oszlopok azonban maguk is rugalmas, de csak 100 és 200 px között. Ők nőnek és zsugorodnak egyszerre ha módosítjuk a nézetablak méretét.

 grid-template-oszlopok: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Ne feledje, hogy mi is használja a ismétlés() funkció veled minimum maximum(). Így az előző kódrészlet így is írható:

 grid-template-columns: ismétlés (3, minmax (100px, 200px)); 

Dinamikus hosszértékek

A statikus értékeken kívül a minimum maximum() funkció is elfogadja százalékos egységek és a új frakció (fr) egység érvként. Ezek használatával egyéni rácsokat érhetünk el, amelyek mindkettő fogékony és méretük megváltoztatása a rendelkezésre álló hely szerint.

Az alábbi kód olyan rácsot eredményez, amelyben az első oszlop szélessége 50% és 80% között mozog míg a második és a harmadik egyenletesen megosztja a fennmaradó helyet.

 rács-sablon oszlopok: minmax (50%, 80%) 1fr 1fr; 

Amikor dinamikus értékeket használunk a minimum maximum() funkció, döntő fontosságú a szabály, amelynek van értelme. Hadd mutassak meg egy példát, ahol a a rács szétesik:

 grid-template-oszlopok: minmax (1fr, 2fr) 1fr 1fr; 

Ez a szabály nincs értelme, mivel a böngésző nem tud dönteni melyik értéket rendelje a minimum maximum() funkció. A minimális érték a 1fr 1fr 1fr oszlop szélessége, míg a maximum 2fr 1fr 1fr. De mindkettő nagyon kicsi képernyőn is lehetséges. Van semmi, amire a böngésző kapcsolódhat.

Itt az eredmény:

A statikus és dinamikus értékek kombinálása

Ez is lehetséges statikus és dinamikus értékek kombinálása. Például a fenti Codepen demóban a minmax (100px, 200px) 1fr 1fr; szabály, amely egy rácsot eredményez, ahol az első oszlop 100 és 200px között mozog és a fennmaradó hely egyenletesen oszlik meg a másik kettő között.

 grid-template-oszlopok: minmax (100px, 200px) 1fr 1fr; 

Érdekes megfigyelni, hogy a nézetablak növekszik, először az első oszlop 100px-ről 200px-ra nő. A másik kettő, amelyet a fr egység irányít, elkezd növekedni csak az első elérése után. Ez logikus, mivel a frakcióegység célja, hogy felosztja a rendelkezésre álló (maradék) helyet.

A min-tartalom, max-tartalom, és kocsi kulcsszavak

Van egy harmadik érték hozzárendelhetjük a minimum maximum() funkció. A min-tartalom, max-tartalom, és kocsi a kulcsszavak a rácsos pálya méreteit a tartalma.

max-tartalom

A max-tartalom kulcsszó irányítja a böngészőt, amelynek a rácsoszlopnak kell lennie olyan széles, mint a legszélesebb elem.

Az alábbi bemutatón a 400px kép az első rácspályán belül, és a következő CSS szabályt használta (a cikk végén egy Codepen demót talál a teljes módosított kóddal):

 .konténer grid-template-oszlopok: max. tartalom 1fr 1fr; / ** * Ugyanaz a minmax () jelöléssel: * grid-template-oszlopok: minmax (max-tartalom, max-tartalom) 1fr 1fr; * / 

Nem használtam minimum maximum() még nem, de a fenti kódmegjegyzésben láthatja, hogy ugyanaz a kód hogyan néz ki vele (bár itt felesleges).

Mint látható, az első rácsoszlop olyan széles, mint a legszélesebb eleme (itt a kép). Így a felhasználók mindig láthatják a képet teljes méretben. Azonban egy bizonyos nézetablak-méret alatt ez az elrendezés nem reagál.

min-tartalom

A min-tartalom kulcsszó irányítja a böngészőt, hogy a rácsoszlopnak olyan szélesnek kell lennie, mint a a legszűkebb elemet tartalmazza, oly módon nem vezet túlfolyáshoz.

Lássuk, hogyan néz ki az előző demó a képpel, ha megváltoztatjuk az első oszlop értékét min-tartalom:

 .konténer grid-template-oszlopok: min-tartalom 1fr 1fr; / ** * Ugyanaz a minmax () jelöléssel: * grid-template-oszlopok: minmax (min-tartalom, min-tartalom) 1fr 1fr; * / 

A zöld hátteret a kép alatt hagytam úgy, hogy az első rácscellát láthassa.

Mint látható, az első oszlop megtartja a legkisebb szélességet túlfolyás nélkül érhető el. Ebben a példában ezt a 4. és 7. rácscellák minimális szélessége határozza meg, amely a párnázás és betűméret tulajdonságait, mint az első cellában lévő képet nullára zsugorodhat túlcsordulás nélkül.

Ha a rácscellában szöveges karakterlánc található, min-tartalom lenne egyenlő a leghosszabb szó szélességével, mivel ez a legkisebb elem, amelyet nem lehet tovább zsugorítani túlcsordulás nélkül. Íme egy nagy cikk a BitsOfCode-tól, ahol láthatjuk, hogyan min-tartalom és max-tartalom viselkedjen, ha a rácscellában szöveges karakterlánc található.

használata min-tartalom és max-tartalom együtt

Ha mi használat min-tartalom és max-tartalom együtt benne minimum maximum() funkciót kapunk egy rácsoszlopot, amely:

1. érzékeny
2. nincs túlcsordulása
3. nem tágabb, mint a legszélesebb eleme

 .konténer grid-template-oszlopok: minmax (min-tartalom, max-tartalom) 1fr 1fr;  

Használhatjuk a min-tartalom és max-tartalom kulcsszavak más hosszúsági értékekkel együtt benne minimum maximum() funkció, amíg a szabálynak nincs értelme. Például, minmax (25%, max. tartalom) vagy minmax (min-tartalom, 300px) mindkét érvényes szabály.

kocsi

Végül használhatjuk a kocsi kulcsszó mint a minimum maximum() funkció.

Amikor kocsi jelentése maximálisan használható, értéke azonos max-tartalom.

Ha ez minimálisan használják, értékét a min-szélesség / min-height ez azt jelenti, hogy kocsi néha azonos min-tartalom, de nem mindig.

Az előző példánkban, min-tartalom egyenlő kocsi, mivel az első rácsoszlop minimális szélessége mindig kisebb, mint a minimális magassága. Tehát a hozzátartozó CSS ​​szabály:

 .konténer grid-template-oszlopok: minmax (min-tartalom, max-tartalom) 1fr 1fr;  

így is írható:

 .konténer grid-template-columns: minmax (auto, auto) 1fr 1fr;  

A kocsi kulcsszó is lehet más statikus és dinamikus egységekkel együtt használják (pixelek, fr egység, százalékok stb.) a minimum maximum() funkciót minmax (auto, 300px) érvényes szabály lenne.

Tesztelheti, hogy a min-tartalom, max-tartalom, és kocsi a kulcsszavak együtt működnek minimum maximum() funkció a következő Codepen demóban: