CSS Grid Layout Jak používat minmax ()

CSS Grid Layout Module zavádí responzivní design na další úroveň zavedením a nový druh flexibility to nikdy předtím neviděl. Teď nemůžeme definovat vlastní mřížky blankytně rychle jen s čistým CSS, ale CSS Grid má také mnoho skrytých drahokamů které nám umožňují další vylepšení sítě a dosažení složitých rozvržení.

minmax () funkce je jednou z těchto méně známých vlastností. Umožňuje definovat velikost mřížkové dráhy jako minimální až maximální rozsah tak, aby se mřížka mohla přizpůsobit výřezu každého uživatele nejlepším možným způsobem.

Syntax

Syntaxe minmax () funkce je poměrně jednoduchá dva argumenty: minimální a maximální hodnota:

 minmax (min, max) 

min hodnota musí být menší než max, v opačném případě max prohlížeč ignoruje.

Můžeme použít minmax () funkce jako hodnotu sloupce mřížkové šablony nebo řádky šablony mřížky vlastnost (nebo obojí). V našem příkladu použijeme první, protože je to mnohem častější případ použití.

 .kontejner zobrazení: mřížka; sloupce mřížkové šablony: minmax (100px, 200px) 1fr 1fr; řádky mřížkové šablony: 100px 100px 100px; grid-gap: 10px;  

V demoverzi Codepen níže najdete HTML a CSS kód budeme používat v celém článku.

Můžeme použít různých hodnot uvnitř minmax () funkce, vše závisí na tom, jaký typ mřížky chceme vytvořit.

Hodnoty statické délky

Existují dva základní způsoby jak minmax () funkce hodnoty statické délky.

Za prvé, můžeme použít minmax () pouze pro jeden sloupec mřížky a definovat šířku ostatních sloupců jako jednoduché statické hodnoty (zde pixely).

 sloupce mřížkové šablony: minmax (100px, 200px) 200px 200px; 

Na níže uvedeném ukázce gifu vidíte, že toto rozvržení je nereaguje, ale první sloupec má určitou flexibilitu. Druhý a třetí sloupec si zachovají svou pevnou šířku (200px), zatímco první sloupec se pohybuje od 100px do 200px, na základě dostupného prostoru.

Zadruhé můžeme definovat šířku více než jeden sloupec mřížky použitím minmax (). Hodnoty min a max jsou statické, takže ve výchozím nastavení je mřížka nereaguje. Samotné sloupce jsou však flexibilní, ale pouze mezi 100px a 200px. oni rostou a smršťují se současně změníme velikost výřezu.

 mřížkové templátové kolony: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Všimněte si, že můžeme také používat opakovat() funkce s ním minmax (). Předchozí fragment kódu lze také napsat takto:

 sloupce mřížkové šablony: opakování (3, minmax (100px, 200px)); 

Hodnoty dynamické délky

Kromě statických hodnot minmax () funkce také přijímá procentních jednotek a nová frakce (fr) jako argumenty. Pomocí nich můžeme dosáhnout vlastní mřížky, které jsou oba reagující a změnit jejich rozměry podle dostupného prostoru.

Níže uvedený kód má za následek mřížku, ve které je šířka prvního sloupce pohybuje mezi 50% a 80% zatímco druhý a třetí rovnoměrně rozdělte zbývající prostor.

 sloupce mřížkové šablony: minmax (50%, 80%) 1fr 1fr; 

Při použití dynamických hodnot pomocí minmax () je důležité nastavit a pravidlo, které dává smysl. Dovolte mi ukázat vám příklad, kde mřížka se rozpadne:

 sloupce mřížkové šablony: minmax (1fr, 2fr) 1fr 1fr; 

Toto pravidlo nedává žádný smysl, protože prohlížeč je nemůže rozhodnout která hodnota přiřazuje minmax () funkce. Minimální hodnota by vedla k a 1fr 1fr šířka sloupce, zatímco maximum 2fr 1fr. Ale oba jsou možné i na velmi malém plátně. Tady je nic, s čím se prohlížeč nemůže týkat.

Zde je výsledek:

Kombinujte statické a dynamické hodnoty

Je také možné kombinovat statické a dynamické hodnoty. Například v demoverzi Codepen jsem použil minmax (100px, 200px) 1fr 1fr; výsledkem je mřížka, kde je první sloupec rozsahy mezi 100px a 200px a zbývající prostor je mezi ostatními dvěma.

 sloupce mřížkové šablony: minmax (100px, 200px) 1fr 1fr; 

Je zajímavé pozorovat, že jak výřez roste, první sloupec roste ze 100px na 200px. Ostatní dva, ovládaní jednotkou fr, začínají růst až po dosažení maximální šířky. To je logické, protože cílem frakční jednotky je rozdělit dostupný (zbývající) prostor.

min-obsah, max-content, a auto klíčová slova

Je tu třetí hodnota můžeme přiřadit minmax () funkce. min-obsah, max-content, a auto klíčová slova se týkají rozměrů mřížkové dráhy k obsah, který obsahuje.

max-content

max-content klíčové slovo směruje prohlížeč, že sloupec mřížky musí být co nejširší prvek, který obsahuje.

Na níže uvedeném demu jsem umístil a 400px široký obraz uvnitř první mřížky a použil následující pravidlo CSS (Na konci článku najdete demo s kódem s kódem s úplným upraveným kódem):

 .kontejner grid-template-columns: max-content 1fr 1fr; / ** * Stejný s zápisem minmax (): * sloupce šablony-šablony: minmax (max-obsah, max-obsah) 1fr 1fr; * / 

Nepoužil jsem minmax () notace, ale ve výše uvedeném komentáři můžete vidět, jak by stejný kód vypadal s ním (i když je to zde zbytečné).

Jak vidíte, první sloupec mřížky je stejně široký jako jeho nejširší prvek (zde obrázek). Uživatelé tak mohou vždy obraz vidět v plné velikosti. V rámci určité velikosti výřezu je však toto rozložení nereaguje.

min-obsah

min-obsah klíčové slovo směruje prohlížeč, že sloupec mřížky musí být stejně široký jako nejužší prvek, který obsahuje, způsobem nevede k přetečení.

Uvidíme, jak vypadá předchozí demo s obrázkem, pokud změníme hodnotu prvního sloupce na min-obsah:

 .kontejner grid-template-columns: min-obsah 1fr 1fr; / ** * Totéž s notací minmax (): * sloupce šablony mřížky: minmax (obsah min, obsah min) 1fr 1fr; * / 

Nechal jsem zelené pozadí pod obrázkem, takže můžete vidět plnou velikost první buňky mřížky.

Jak vidíte, první sloupec zachovává nejmenší šířku lze dosáhnout bez přetečení. V tomto příkladu to bude definováno minimální šířkou 4. a 7. buňky mřížky, která vychází z polstrování a velikost písma vlastnosti, jako obrázek v první buňce mohl být zmenšen na nulu bez přepadu.

Pokud buňka mřížky obsahovala textový řetězec, min-obsah bylo by rovna šířce nejdelšího slova, je to nejmenší prvek, který nelze dále zmenšit bez přetečení. Zde je skvělý článek od BitsOfCode, kde můžete vidět, jak min-obsah a max-content chovat, když buňka mřížky obsahuje textový řetězec.

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

Kdybychom použití min-obsah a max-content spolu uvnitř minmax () funkce získáme sloupec mřížky, který:

1. reaguje
2. nemá žádné přetečení
3. není širší než jeho nejširší prvek

 .kontejner mřížka-šablona-sloupce: minmax (min-obsah, max-obsah) 1fr 1fr;  

Můžeme také použít min-obsah a max-content klíčová slova spolu s dalšími hodnotami délky uvnitř minmax () funkce, dokud pravidlo nedává smysl. Například, minmax (25%, max. obsah) nebo minmax (min-obsah, 300px) by platila obě platná pravidla.

auto

Nakonec můžeme použít i auto klíčové slovo jako argument minmax () funkce.

Když auto je maximálně, jeho hodnota je totožná s max-content.

Když to je jako minimum, jeho hodnota je specifikována min-width / min-height pravidlo, což znamená, že auto je někdy identická min-obsah, ale ne vždy.

V našem předchozím příkladu, min-obsah se rovná auto, protože minimální šířka prvního sloupce mřížky je vždy menší než jeho minimální výška. Pravidlo CSS:

 .kontejner mřížka-šablona-sloupce: minmax (min-obsah, max-obsah) 1fr 1fr;  

lze také napsat takto:

 .kontejner grid-template-columns: minmax (auto, auto) 1fr 1fr;  

auto klíčové slovo může být také spolu s jinými statickými a dynamickými jednotkami (pixely, jednotka fr, procenta atd.) uvnitř minmax () funkce minmax (auto, 300px) by platným pravidlem.

Můžete otestovat, jak min-obsah, max-content, a auto klíčová slova pracují s minmax () funkce v následujícím demo: