Оформление на мрежата от CSS Как да използвате minmax ()

Най- CSS модул за оформление на мрежата взима отзивчивия дизайн към следващото ниво чрез въвеждане на нов вид гъвкавост това никога не е било виждано преди. Сега не можем само определят персонализирани мрежи блестящо бърз единствено с чист CSS, но има и CSS грид много скрити скъпоценни камъни които ни позволяват да променяме мрежата и да постигаме сложни оформления.

Най- MinMax () функция е една от тези по-малко известни характеристики. Тя дава възможност да се определи размерът на мрежата като минимален до максимален обхват така че мрежата може да се адаптира към визуалния прозорец на всеки потребител по най-добрия възможен начин.

Синтаксис

Синтаксисът на MinMax () функцията е сравнително проста, отнема два аргумента: минимална и максимална стойност:

 minmax (min, max) 

Най- мин стойност трябва да бъде по-малък от макс, в противен случай макс се игнорира от браузъра.

Можем да използваме MinMax () функция като стойност на решетка шаблон колони или решетка-шаблон-редове собственост (или и двете). В нашия пример ще използваме първото, тъй като това е много по-честа употреба.

 .контейнер дисплей: решетка; grid-template-колони: minmax (100px, 200px) 1fr 1fr; grid-template-rows: 100px 100px 100px; разстояние между решетките: 10px;  

В демото Codepen по-долу можете да намерите HTML и CSS код ще използваме цялата статия.

Можем да използваме различни стойности вътре MinMax () функция, всичко зависи от вида на персонализираната мрежа, която искаме да създадем.

Статични стойности на дължината

Има два основни начина как да използваме MinMax () функция с статични стойности на дължината.

Първо, можем да използваме MinMax () само за една колона от мрежата и дефиниране на ширината на другите колони като прости статични стойности (пиксели тук).

 grid-template-колони: minmax (100px, 200px) 200px 200px; 

На демото gif по-долу можете да видите, че това оформление е не отговаря, първата колона има известна гъвкавост. Втората и третата колони запазват фиксираната си ширина (200px), докато първата колона варира от 100px до 200px, въз основа на наличното пространство.

Второ, можем да определим ширината на повече от една колона на решетката използвайки MinMax (). Стойностите min и max са статични, така че по подразбиране решетката е не отговаря. Самите колони обаче са гъвкав, но само между 100px и 200px. Те растат и се свиват едновременно като променяме размера на екрана за изглед.

 grid-template-колони: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Имайте предвид, че можем също използвай Повтарям () функция напред MinMax (). Така че предишният кодов фрагмент също може да бъде написан по следния начин:

 решетка-шаблон-колони: повторение (3, minmax (100px, 200px)); 

Стойности на динамичната дължина

Освен статичните стойности,. \ T MinMax () функция също приема процентни единици и нова фракция (fr) единица като аргументи. Като ги използваме, можем да постигнем персонализирани мрежи, които са и двете отзивчив и да променят размерите си според наличното пространство.

Кодът по-долу води до решетка, в която ширината на първата колона варира между 50% и 80% второто и третото равномерно разпределете останалото пространство.

 решетъчни шаблони-колони: minmax (50%, 80%) 1fr 1fr; 

Когато използваме динамични стойности с MinMax () функция, е от решаващо значение да се създаде a правило, което има смисъл. Нека ви покажа един пример, където решетката се разпада:

 решетъчни шаблони-колони: minmax (1fr, 2fr) 1fr 1fr; 

Това правило няма никакъв смисъл, тъй като браузърът е не може да реши коя стойност да зададете на MinMax () функция. Минималната стойност би довела до a 1fr 1fr 1fr ширина на колоната, докато максималната до 2fr 1fr 1fr. Но и двете са възможни дори на много малък екран. Има нищо не може да се свърже с браузъра.

Ето резултатът:

Комбинирайте статични и динамични стойности

Възможно е също така съчетават статични и динамични стойности. Например в демото Codepen по-горе използвах minmax (100px, 200px) 1fr 1fr; правило, което води до мрежа, където е първата колона варира между 100px и 200px и останалото пространство е равномерно разпределени между другите две.

 grid-template-колони: minmax (100px, 200px) 1fr 1fr; 

Интересно е да се отбележи, че при увеличаване на изгледа, първо, първата колона нараства от 100px до 200px. Другите две, управлявани от единицата fr, започват да растат само след като първата достигне максималната си ширина. Това е логично, тъй като целта на фракционната единица е да раздели наличното (останалото) пространство.

Най- мин съдържание, макс съдържание, и Автоматичен ключови думи

Има трети вид стойност можем да присвоим на MinMax () функция. Най- мин съдържание, макс съдържание, и Автоматичен ключовите думи отразяват размерите на трасето на мрежата към съдържанието.

макс съдържание

Най- макс съдържание ключова дума насочва браузъра, който трябва да бъде колоната на мрежата толкова широк, колкото най-широк елемент, който съдържа.

На демото по-долу, поставих a 400px-широк образ вътре в първата решетка на мрежата и е използвал следното CSS правило (в края на статията можете да намерите демо с Codepen с пълен модифициран код):

 .контейнер grid-template-columns: max-content 1fr 1fr; / ** * Същото е и с означението minmax (): * grid-template-column: minmax (max-content, max-content) 1fr 1fr; * / 

Не съм използвал MinMax () все още има нотация, но в кодовия коментар по-горе можете да видите как ще изглежда същият код (въпреки че тук е излишно).

Както виждате, първата колона на решетката е толкова широка, колкото и най-широкият й елемент (тук изображението). По този начин потребителите могат винаги да виждат изображението в пълен размер. Въпреки това, при определен размер на екрана, това оформление е не отговаря.

мин съдържание

Най- мин съдържание ключова дума насочва браузъра, че колоната на решетката трябва да бъде толкова широка, колкото най-малкия елемент, който съдържа, така не води до препълване.

Нека видим как изглежда предишната демонстрация с изображението, ако променим стойността на първата колона на мин съдържание:

 .контейнер grid-template-column: min-content 1fr 1fr; / ** * Същото е и с означението minmax (): * grid-template-column: minmax (min-content, min-content) 1fr 1fr; * / 

Оставих зеления фон под изображението, така че да видиш пълния размер на първата клетка от мрежата.

Както виждате, първата колона запазва най-малката ширина може да се постигне без преливане. В този пример, това ще бъде определено от минималната ширина на 4-та и 7-та решетка клетки, която произтича от подложка и размер на шрифта свойства, като изображението в първата клетка може да бъде намалена до нула без преливане.

Ако клетката на мрежата съдържа текстов низ, мин съдържание би било равна на ширината на най-дългата дума, тъй като това е най-малкият елемент, който не може да се свие без преливане. Ето една страхотна статия от BitsOfCode, където можете да видите как мин съдържание и макс съдържание се държат, когато клетката на мрежата съдържа текстов низ.

Използвайки мин съдържание и макс съдържание заедно

Ако ние употреба мин съдържание и макс съдържание заедно вътре MinMax () функция получаваме колона с решетка, която:

1. е отзивчив
2. няма преливане
3. не става по-широк от най-широкия си елемент

 .контейнер grid-шаблон-колони: minmax (min-content, max-content) 1fr 1fr;  

Можем също да използваме мин съдържание и макс съдържание ключови думи заедно с други стойности на дължината вътре MinMax () функция, докато правилото има смисъл. Например, minmax (25%, максимално съдържание) или minmax (мин. съдържание, 300 пиксела) би било и двете валидни правила.

Автоматичен

И накрая, можем да използваме и Автоматичен ключова дума като аргумент на MinMax () функция.

Кога Автоматичен е използван като максимум, неговата стойност е идентична с макс съдържание.

Когато е използвани като минимум, неговата стойност е посочена от мин ширина / мин височина правило, което означава, че Автоматичен понякога е идентичен с мин съдържание, но не винаги.

В предишния ни пример, мин съдържание е равно на Автоматичен, като минималната ширина на първата колона на мрежата винаги е по-малка от минималната му височина. Така че, съответното правило за CSS:

 .контейнер grid-шаблон-колони: minmax (min-content, max-content) 1fr 1fr;  

също може да бъде написано по следния начин:

 .контейнер grid-template-column: minmax (auto, auto) 1fr 1fr;  

Най- Автоматичен може да бъде и ключова дума използвани заедно с други статични и динамични единици (пиксели, единица fr, проценти и т.н.) вътре в MinMax () функция minmax (автоматично, 300px) би било валидно правило.

Можете да тествате как мин съдържание, макс съдържание, и Автоматичен ключовите думи работят с MinMax () функцията в следното кодирано демо: