CSS rozloženie siete Ako používať minmax ()

Modul rozloženia siete CSS zaujme zodpovedajúci dizajn na ďalšiu úroveň zavedením nový druh flexibility to už nikdy nebolo vidieť. Teraz to môžeme nielen definujte vlastné mriežky ohromne rýchlo iba čisto CSS, ale CSS Grid tiež veľa skrytých drahokamov ktoré nám umožňujú ďalej vylepšiť sieť a dosiahnuť komplikované usporiadanie.

Minmax () funkcie je jedným z týchto menej známych prvkov. Umožňuje definovať veľkosť mriežky minimálne do maximálneho rozsahu aby sa mriežka mohla prispôsobiť výhľadu každého užívateľa čo najlepšie.

syntax

Syntax jazyka Minmax () funkcia je pomerne jednoduchá dva argumenty: minimálna a maximálna hodnota:

 minmax (min, max) 

min hodnota musí byť menšia potom max, inak max bude prehliadač ignorovaný.

Môžeme použiť Minmax () ako funkcia hodnota grid-Template-stĺpca alebo grid-Template-riadky majetok (alebo oboje). V našom príklade budeme používať prvý, pretože je to oveľa častejšie použitie case.

 .kontajner zobrazenie: mriežka; grid-template-columns: minmax (100px, 200px) 1fr 1fr; grid-template-rows: 100px 100px 100px; mriežka: 10px;  

V demoverze Codepen nájdete nižšie HTML a CSS kód budeme používať v celom článku.

Môžeme použiť rôznych druhov hodnôt vnútri Minmax () funkcia závisí od toho, akú vlastnú sieť chceme vytvoriť.

Statické hodnoty dĺžky

Existujú dva základné spôsoby, ako môžeme použiť Minmax () funkcia s statické hodnoty dĺžky.

Po prvé, môžeme použiť Minmax () iba pre jeden stĺpik mriežky a definujte šírku ostatných stĺpcov ako jednoduché statické hodnoty (tu sú pixely).

 šablóna šablóny-stĺpce: minmax (100px, 200px) 200px 200px; 

Na demo nižšie vidíte, že toto rozloženie je nereaguje, avšak prvý stĺpec má určitú flexibilitu. Druhý a tretí stĺpec si zachovajú svoju pevnú šírku (200 pixlov), zatiaľ čo prvý stĺpec sa pohybuje od 100 do 200 pixlov, na základe dostupného priestoru.

Po druhé, môžeme definovať šírku viac ako jeden stĺpik mriežky použitím Minmax (). Hodnoty min a max sú statické, takže v predvolenom nastavení je mriežka nereaguje. Samotné stĺpce sú však pružný, ale len medzi 100px a 200px. oni narastajú a zmršťujú súčasne pri zmene veľkosti výrezu.

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

Všimnite si, že môžeme tiež Použi opakovať () funkcie spolu s Minmax (). Takže predchádzajúci útržok kódu môže byť tiež napísaný takto:

 grid-template-columns: opakovanie (3, minmax (100px, 200px)); 

Dynamické hodnoty dĺžky

Okrem statických hodnôt Minmax () funkcia tiež akceptuje percentuálnych jednotiek a nová frakcia (fr) jednotka ako argumenty. Pomocou nich môžeme dosiahnuť vlastné siete, ktoré sú obe citlivý a zmeniť ich rozmery podľa dostupného priestoru.

Nižšie uvedený kód vedie k mriežke, v ktorej je šírka prvého stĺpca sa pohybuje medzi 50% a 80% zatiaľ čo druhý a tretí rovnomerne zdieľať zostávajúci priestor.

 stĺpcová šablóna-stĺpce: minmax (50%, 80%) 1fr 1fr; 

Keď používame dynamické hodnoty s Minmax () je dôležité vytvoriť a pravidlo, ktoré dáva zmysel. Dovoľte mi ukázať vám príklad, kde mriežka sa rozpadá:

 stĺpcová šablóna-stĺpce: minmax (1fr, 2fr) 1fr 1fr; 

Toto pravidlo nemá zmysel, pretože je to prehliadač nemôže rozhodnúť ktorú hodnotu priradiť Minmax () Funkcie. Minimálna hodnota by viedla k a 1fr 1fr 1fr šírka stĺpca, zatiaľ čo maximálna hodnota 2fr 1fr 1fr. Ale oboje sú možné aj na veľmi malej obrazovke. je tu nič, s čím sa môže prehliadač vzťahovať.

Tu je výsledok:

Spojte statické a dynamické hodnoty

Je tiež možné skombinujte statické a dynamické hodnoty. Napríklad v demoverze Codepeň som použil minmax (100px, 200px) 1fr 1fr; pravidlo, ktoré vedie k mriežke, kde je prvý stĺpec sa pohybuje v rozmedzí od 100px do 200px a zostávajúci priestor je rovnomerne rozdelené medzi ostatné dve.

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

Je zaujímavé poznamenať, že pri výbere výrezu sa prvý stĺpec rastie od 100 do 200 pixlov. Ostatné dva, ovládané fr jednotkou, začína rásť až po dosiahnutí maximálnej šírky. Je to logické, pretože cieľom frakčnej jednotky je rozdeliť dostupný (zostávajúci) priestor.

min-obsah, max-content, a auto Kľúčové slová

Je tu a tretí druh hodnoty môžeme priradiť Minmax () Funkcie. min-obsah, max-content, a auto kľúčové slová sa týkajú rozmerov trate mriežky na obsahu, ktorý obsahuje.

max-content

max-content kľúčových slov smeruje prehliadač, že musí byť stĺpec mriežky čo najširší ako najširší prvok, ktorý obsahuje.

Na demo nižšie som umiestnil a 400px-wide image v rámci prvej mriežkovej stopy a použil nasledujúce pravidlo CSS (môžete nájsť kótovací demo s úplne upraveným kódom na konci článku):

 .kontajner grid-template-columns: max-content 1fr 1fr; / ** * To isté platí pre zápis minmax (): * mriežka-šablóna-stĺpce: minmax (max. Obsah, max. Obsah) 1fr 1fr; * / 

Nepoužil som Minmax () notation yet, ale v kóde komentár vyššie môžete vidieť, ako by to vyzerať rovnaký kód s ním (aj keď je to zbytočné tu).

Ako vidíte, prvý stĺpik mriežky je tak široký ako jeho najširší prvok (tu je obraz). Týmto spôsobom môžu užívatelia vždy vidieť obrázok v plnej veľkosti. Avšak v rámci určitej veľkosti okna je toto rozloženie nereaguje.

min-obsah

min-obsah kľúčových slov smeruje prehliadač, že stĺpec mriežky musí byť tak široký ako najužší prvok, ktorý obsahuje, takým spôsobom nevedie k pretečeniu.

Pozrime sa, ako vyzerá predchádzajúca ukážka s obrázkom, ak zmeníme hodnotu prvého stĺpca min-obsah:

 .kontajner grid-template-columns: min-content 1fr 1fr; / ** * To isté platí pre zápis minmax (): * mriežka-šablóna-stĺpce: minmax (min-obsah, min-obsah) 1fr 1fr; * / 

Nechal som zelené pozadie pod obrázkom, aby ste mohli vidieť plnú veľkosť prvej bunky mriežky.

Ako vidíte, prvý stĺpec si zachováva najmenšiu šírku možno dosiahnuť bez pretečenia. V tomto príklade bude táto definovaná minimálnou šírkou štvrtej a siedmej mriežky, ktorá pochádza z vypchávka a veľkosť písma vlastnosti ako obrázok v prvej bunke by sa mohla zmenšiť na nulu bez pretečenia.

Ak mriežka obsahovala textový reťazec, min-obsah bolo by sa rovná šírke najdlhšieho slova, pretože je to najmenší prvok, ktorý sa nedá ďalej zmršťovať bez pretečenia. Tu je skvelý článok BitsOfCode, kde môžete vidieť, ako min-obsah a max-content správanie sa, keď bunka mriežky obsahuje textový reťazec.

Použitím min-obsah a max-content spolu

Keby sme použitie min-obsah a max-content spolu vnútri Minmax () funkcia získame stĺpec mriežky, ktorý:

1. reaguje
2. nemá pretečenie
3. nerastie širší ako jeho najširší prvok

 .kontajner mriežka-šablóna-stĺpce: minmax (min-obsah, max. obsah) 1fr 1fr;  

Môžeme tiež použiť min-obsah a max-content Kľúčové slová spolu s ďalšími hodnotami dĺžky vnútri Minmax () funkciu, kým pravidlo nemá zmysel. Napríklad, minmax (25%, max. obsah) alebo minmax (min-obsah, 300px) by boli obe platné pravidlá.

auto

Napokon môžeme tiež použiť auto kľúčových slov ako argument Minmax () funkcie.

Kedy auto je maximálne, jeho hodnota je identická max-content.

Keď je to minimálne, jeho hodnota je určená min-šírka / min výška pravidlo, čo znamená, že auto je niekedy identické min-obsah, ale nie vždy.

V našom predchádzajúcom príklade, min-obsah sa rovná auto, pretože minimálna šírka prvého mriežkového stĺpca je vždy menšia ako jeho minimálna výška. Takže príslušné pravidlo CSS:

 .kontajner mriežka-šablóna-stĺpce: minmax (min-obsah, max. obsah) 1fr 1fr;  

môže byť taktiež napísané takto:

 .kontajner mriežka-šablóna-stĺpce: minmax (auto, auto) 1fr 1fr;  

auto kľúčové slovo môže byť tiež používané spolu s inými statickými a dynamickými jednotkami (pixely, fr jednotka, percentá atď.) vo vnútri Minmax () napríklad minmax (auto, 300px) by bolo platným pravidlom.

Môžete vyskúšať, ako min-obsah, max-content, a auto kľúčové slová pracujú s Minmax () funkcia v nasledujúcom demo systému Codepen: