Сколько аргументов принимает функция minmax grid

minmax()

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

minmax() это CSS функция, определяющая диапазон размеров, который больше или равен min и меньше или равен max. Используется в CSS Grids.

/* , values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) minmax(100px, max-content) minmax(min-content, 400px) minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) /* , values */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* , values */ minmax(400px, 50%) minmax(30%, 300px) minmax(min-content, 200px) minmax(max-content, 200px) minmax(auto, 300px)

Синтаксис

Функция принимает два параметра, min и max.

Каждый параметр может быть значением , либо , либо , или одним из ключевых слов max-content , min-content , или auto .

Значения

A non-negative length.

A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the must be treated as auto . The user agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.

A non-negative dimension with the unit fr specifying the track’s flex factor. Each -sized track takes a share of the remaining space in proportion to its flex factor.

Represents the largest max-content contribution of the grid items occupying the grid track.

Represents the largest min-content contribution of the grid items occupying the grid track.

As a maximum, identical to max-content . As a minimum it represents the largest minimum size (as specified by min-width / min-height ) of the grid items occupying the grid track.

Формальный синтаксис

Error: could not find syntax for this item

Пример

CSS

#container  display: grid; grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; > #container > div  background-color: #8ca0ff; padding: 5px; >

HTML

div id="container"> div> Item as wide as the content,br /> but at most 300 pixels. div> div>Item with flexible width but a minimum of 200 pixels.div> div>Inflexible item of 150 pixels width.div> div>

Результат

Спецификации

Specification
CSS Grid Layout Module Level 2 # valdef-grid-template-columns-minmax

Browser compatibility

BCD tables only load in the browser

Смотрите также

Grid Layout Guide: Basic concepts of grid layout — track sizing with minmax()
Video tutorial: Introducing minmax()

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Product help
Report an issue

Our communities

Developers

Web Technologies
Learn Web Development
MDN Plus
Hacks Blog

Website Privacy Notice
Cookies
Legal
Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Сколько аргументов принимает функция min max?

Функции min и max — одни из самых распространенных встроенных функций во многих языках программирования. Они позволяют найти минимальное или максимальное значение из заданного набора.

Однако, не всем известно, что обе эти функции могут принимать любое количество аргументов. То есть, мы можем передавать им как одно значение, так и несколько значений через запятую.

Когда функция min или max принимает только один аргумент, она просто возвращает этот аргумент. Но когда передано несколько аргументов, она проходит по каждому из них и находит наименьшее или наибольшее значение соответственно.

Такая гибкость в работе функций min и max делает их очень удобными при работе с различными коллекциями данных, такими как списки или массивы. Они позволяют найти минимальное или максимальное значение без необходимости реализации сложного алгоритма.

Особенности работы функции min и max

Функции min и max возвращают соответственно наименьшее и наибольшее значение из переданных аргументов. Однако, они работают по-разному, в зависимости от типа передаваемых значений.

В случае, когда аргументом является набор чисел, функции min и max сравнивают данные значения и возвращают наименьшее и наибольшее число, соответственно.

min(2, 5, 1, 8) // вернет 1

max(2, 5, 1, 8) // вернет 8

Однако, при использовании функций min и max с массивами, они не сравнивают значения массивов, а только их длину.

min([2, 5, 1, 8], [3, 6, 4]) // вернет [2, 5, 1, 8] (первый массив)

max([2, 5, 1, 8], [3, 6, 4]) // вернет [3, 6, 4] (второй массив)

Если же аргументом является набор строк, функции min и max сравнивают строки лексикографически (по алфавиту). То есть, они сравнивают символы строк по порядку и возвращают наименьшую и наибольшую строку, соответственно.

min(‘apple’, ‘banana’, ‘cherry’) // вернет ‘apple’

max(‘apple’, ‘banana’, ‘cherry’) // вернет ‘cherry’

Важно учитывать, что регистр символов также учитывается при сравнении строк. Буква в верхнем регистре имеет меньшее значение, чем такая же буква в нижнем регистре.

min(‘apple’, ‘Banana’, ‘cherry’) // вернет ‘Banana’

max(‘apple’, ‘Banana’, ‘cherry’) // вернет ‘cherry’

Также следует отметить, что функции min и max могут принимать переменное количество аргументов. Это означает, что они могут сравнивать любое количество значений, переданных в качестве аргументов.

min(1, 3, 5, 2) // вернет 1

max(1, 3, 5, 2) // вернет 5

В случае, если функция min или max вызывается без аргументов, они вернут Infinity и -Infinity, соответственно.

Сколько аргументов принимает функция min

Функция min в Python принимает любое количество аргументов, но как минимум один. Она служит для нахождения минимального значения среди переданных аргументов.

Если функция вызывается без аргументов, будет возбуждено исключение TypeError.

Если функция вызывается с одним аргументом, он будет воспринят как итерируемый объект (например, список, кортеж, строка или даже генератор) и из него будет найдено минимальное значение.

Если функция вызывается с несколькими аргументами, будет найдено минимальное значение среди всех аргументов.

min(1, 2, 3) # Возвращает 1

min([1, 2, 3]) # Возвращает 1

min(«abc») # Возвращает ‘a’

min(54.7, 32.1, 91.5) # Возвращает 32.1

В случае, если передаваемые аргументы имеют различные типы, функция min следует правилу «все типы сравниваются в соответствии со своими правилами сравнения», что может привести к ошибкам или неожиданным результатам.

Сколько аргументов принимает функция max

Функция max в Python принимает любое количество аргументов. Она может принимать от одного до нескольких аргументов, в зависимости от того, сколько элементов вы хотите сравнить.

Пример использования функции max с одним аргументом:

a = max(5)
 print(a) # Output: 5

Если передан только один аргумент, то функция просто вернет его значение.

Пример использования функции max с несколькими аргументами:

a = max(5, 10, 2)
 print(a) # Output: 10

Если передано несколько аргументов, то функция сравнит их значения и вернет наибольшее.

Также функция max может быть использована для нахождения максимального элемента в списке:

numbers = [5, 10, 2, 7]
 a = max(numbers)
 print(a) # Output: 10

В этом случае функция будет сравнивать значения элементов списка и вернет наибольшее значение.

Вопрос-ответ

Сколько аргументов может принимать функция min?

Функция min может принимать любое количество аргументов. Она сравнивает значения переданных аргументов и возвращает наименьшее из них.

Сколько аргументов может принимать функция max?

Функция max может принимать любое количество аргументов. Она сравнивает значения переданных аргументов и возвращает наибольшее из них.

Можно ли использовать функции min и max без аргументов?

Нет, использование функций min и max без аргументов вызовет ошибку. В этих функциях необходимо передать хотя бы один аргумент для сравнения значений.

Могут ли функции min и max принимать аргументы разных типов данных?

Да, функции min и max могут принимать аргументы разных типов данных. Они будут сравнивать значения по правилам сравнения для соответствующих типов данных. Например, при сравнении чисел будет использоваться математическое сравнение, а при сравнении строк — лексикографическое сравнение.

Что произойдет, если в функции min или max передать аргументы разного типа данных, которые нельзя сравнить?

Если в функции min или max передать аргументы разного типа данных, которые нельзя сравнить, то будет возбуждено исключение TypeError. Примером таких аргументов может быть сравнение числа со строкой.

Математические функции в CSS: для чего нужны и как ими пользоваться

Математические функции в CSS расширяют логические возможности. Они позволяют не только ускорить процесс верстки, но и задать точные характеристики для объектов, которые можно вычислить математически. Особенно встроенные функции в CSS могут быть полезны при верстке pixel perfect, когда важно соответствие верстки с макетом вплоть до пикселя.

Математические функции в CSS не стоит путать с выражениями, которые могут встречаться в различных препроцессорах, например, LESS, SCSS и так далее. Они могут существовать в препроцессорах, но с оговорками:

все расчеты происходят при компиляции и результаты выводятся в готовый файл в виде фиксированного значения;
в препроцессорных функциях не получится сочетать разные единицы измерения в одном выражении.

В CSS существует 4 классических математических функций: min, max, clam и calc.

Функциональные обозначения в CSS

Функциональное обозначение — это стандарт, по которому записываются функции в том или ином языке программирования или разметки. В CSS функция имеет следующий вид: название(аргумент). Базовый синтаксис всегда остается неизменным. Вместо аргумента обычно используется математическое выражение, с помощью которого и проводятся расчеты.

Внутри скобок может быть несколько выражений, но в случае с CSS они должны соответствовать конкретной функции. Например, в min и max не получится выполнять полноценные математические операции, как это можно сделать в calc.

Математические выражения внутри функций

Внутри круглых скобок происходят основные расчеты, заданные верстальщиков. Эта область математических выражений или аргументов. Внутри скобок поддерживается четыре стандартные операции (в скобках указано обозначение операции): сложение(+), вычитание(-), деление(/), умножение(*).

Поддерживаются дополнительные выражения, например, attr. Они не являются полноценными функциями. В основном такие выражения служат для добавления атрибутов и параметров для HTML-компонентов через CSS. Такие дополнения могут тоже полноценно встраиваться в математические выражения основных функций.

Со всеми этими математическими выражениями способны работать функции: min, max и calc.

Допускается вложение функций друг в друга. Например:

Правда, опытные разработчики рекомендуют по возможности избегать чрезмерной вложенности. Дело в том, что это в последствии сильно усложнит работу с разметкой, а особенно исправление ошибок. Если есть возможность, то старайтесь проводить расчеты в отдельных функциях. Так вы сможете быстро обнаружить и устранить возникшую ошибку, да и другим людям будет проще работать с вашим кодом. Исключение может быть в том случае, если вам требуется максимально оптимизировать верстку.

Функции min(), max()

Функции min и max возвращают минимальное и максимальное из переданных значений соответственно. Можно задавать как фиксированное значение, например, в пикселях, так и динамическое — в процентах, rem’ах и так далее. В последнем случае оно будет подстраиваться под внешние условиях — размер окна и разрешение экрана. В качестве аргумента функции возможно задать одновременно и фиксированное, и динамическое значение:

width: min(350px, 50%);

В этом примере элемент будет принимать ширину не менее 350 пикселей и не менее 50% от размеров родительского блока. Примерно аналогичным образом работает функция max, но только в ней записывается уже максимальное значение.

Функции min и max могут быть объединены в одну — minmax. Она имеет следующий вид: minmax(min, max). Здесь в качестве аргументов выступают минимальная и максимальная величина соответственно. В случае, если максимальное значение, заданное в качестве аргумента, меньше или равно минимальному, то оно будет проигнорировано. Функции minmax, min и max способны принимать следующие типы значений:

фиксированные размеры, например, размер в пикселях;
проценты;
гибкие размеры, например, в rem и em;
max-content;
min-content;
auto.

В качестве практического примера для демонстрации возможности функции minmax создадим три блока. При обычном разрешении экрана эти блоки будут иметь одинаковые размеры, но при уменьшении окна или разрешения они будут меняться пропорционально друг другу.

Сделаем так, чтобы левая ячейка тоже меняла размер, но при этом оставалась в диапазоне 100-200 пикселей вне зависимости от размера родительского элемента.

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

Класс grid присвоен первой колонке. Она тоже адаптируется под размеры окна, но при этом ее ширина остается всегда в пределах от 100 до 200 пикселей. Вторая и третья колонки сжимаются и расширяются до заполнения оставшегося свободного места поровну.

Сюда тоже можно прописать разные типы значений в качестве аргумента, например, фиксированную величину и величину в процентах. Если в эту же функцию задать проценты, например, minmax(200px, 50%), то первая ячейка будет всегда занимать половину от размера блока, но при этом не будет уменьшаться ниже 200 пикселей от доступного пространства.

Аналогично возможно указать гибкие размеры. Это новая единица, тоже введенная спецификацией CSS Grid Layout. К ней можно отнести единицы измерения em, rem, fr. Поддержка последнего была добавлена недавно. Размеры элементов, указанные в fr, занимают равноценное свободное место. Например, есть 4 блока и каждый занимает по 1fr, следовательно, каждый занимает по 25% от 100% размера родительского элемента. Можно также задавать 1.5-2-3 и более fr. В таком случае блок будет просто отбирать больше пространства в процентном соотношении, а пространство между остальными поделиться поровну.

Для примера изменим рассмотрим функцию такого вида minmax(200px, 1fr). В шаблоне 3 элемента и все по умолчанию имеют размер 1fr, то есть занимают равное пространство. Когда размер родителя начнет уменьшаться до такого уровня, что 1fr не сможет равняться 200 пикселей, то первый объект (эта функция задана для него) не будет становиться меньше 200 пикселей. Остальные же будут продолжать делить оставшееся пространство поровну.

Аргументы max-content и min-content задают фиксированный размер относительно контента, находящегося в ячейке. При них размер ячейки подстраивается таким образом, чтобы содержимое свободно вмешалось и не выходило за пределы ячейки. В случае с max-content контент в ячейке не должен переноситься на новую строку и выходить за пределы границ ячейки. В случае с min-content перенос на новую строку допускается.

Функция clamp()

Эта функция чем-то похожа на предыдущие, но только принимает три значения в качестве аргумента — минимальное, максимальное и желаемое значение. Основываясь на этих значениях подбирается оптимальный размер для элемента. Функция имеет вид: clamp(MIN, VAL, MAX).

В качестве примера разберем аргументы с фиксированными значениями:

width: clamp(20px, 40px, 80px);

Ширина будет подстраиваться максимально близко к 40 пикселям, но с учетом размера экрана и соседних элементов. При этом ширина объекта ни при каких обстоятельствах не может быть меньше 20 пикселей и больше 80.

В качестве аргумента можно прописывать плавающие значение, например, проценты, rem, em.

width: clamp(25%, 40px, 5em);

В этом примере объект стремиться к ширине 40 пикселей, но при этом не должен быть меньше 25% от размера родителя, но при он не должен быть больше 6em. Стоит заметить, что размер em напрямую зависит от размера шрифта в документе или в отдельном блоке. Если учесть, что стандартный размер шрифта в документе 14 пикселей, то максимально допустимая ширина в этом примере 70 пикселей.

Функцию clamp можно применять и для расчета размера шрифта:

font-size: clamp(1em, 16px, 3.5rem);

Здесь размер шрифта меняется в зависимости от области видимости. В идеале его размер должен быть 16px, но не может быть меньше 1em и больше 3.5em.

Функция calc()

Данная функция позволяет рассчитывать значения свойств CSS во время их определения. Доступны стандартные операции: сложение, вычитание, умножение, деление. В качестве аргумента функция принимает математические выражения. Она умеет вычитать любые значения, например, проценты и пиксели.

width: calc(100% — 30px);

В рассматриваемом примере объект будет занимать всю ширину родителя с вычетом 30 пикселей. Значение в процентах переводится браузером в пиксели, что позволяет проводить корректные расчеты. Перевод производится автоматически, например, при изменении размеров окна.

Также здесь доступны операции с числами, не привязанными к значениям:

width: calc(100% / 8);

После выполнения расчетов блок будет занимать ⅛ от родительского элемента.

Еще с помощью этой функции можно складывать параметры цвета:

—palette-hue: calc(var(—palette-hue) + var(—palette-step-1));

Дополнительно в качестве примера разберем настройку размера изображения в карточке с помощью функции calc. Пока имеется такая разметка:

.card min-width: 400px;
max-width: 500px;
padding: 1rem;
>

В получившемся результате изображение имеет отступы по бокам от края карточки. Требуется, чтобы у него по бокам не было отступов.

Это можно решить с помощью функции calc:

.card min-width: 400px;
max-width: 500px;
padding: 1rem;
>

.card__img /* Ширина картинки */
width: calc(100% + 2rem);
/* Сдвиг влево на размер паддинга */
margin-left: -1rem;
>

К ширине картинки прибавляется еще 2rem, чтобы она была растянута чуть больше своего родителя. Сдвиг изображения влево на 1rem подгоняет его под размер карточки.

Используя функцию calc нужно помнить о следующих нюансах:

Арифметический знак нужно отделять пробелом от чисел с обеих сторон. В противном случае браузер может проигнорировать функцию или сделать неверные расчеты.
Проводите расчеты только совместимых единиц. Можно считать пиксели с процентами, rem, em и так далее, но нельзя складывать, например, пиксели с градусами.
В @media проводите расчеты только с одинаковыми единицами, проценты с процентами, пиксели с пикселями и так далее.
Делить на ноль нельзя. Будет ошибка.

Заключение

Поддержка отдельных функций браузерами может различаться, но незначительно. В среднем уровень поддержки составляет более 95%. Проблемы могут возникать в старых версиях браузеров и, в основном, с функцией calc:

Firefox ниже 59 версии не поддерживает работу с цветами;
IE 9-11 не умеет работать с тенями, заданными через функцию calc;
IE 9-11 и даже новые версии Edge не поддерживают конструкцию width: calc(), если она применяется для задания размеров ячеек таблиц.

Пока что, это основные 4 функции, доступные в CSS. Планируется в ближайшее время добавить функции mod(), round(), sin() и другие, но пока не известно до конца, как они будут работать, плюс, у них нет поддержки ни одним браузером.

Функции в CSS позволяют упростить верстку, благодаря возможности делать расчеты в качестве аргументов. Ранее для этого требовалось задействовать сторонние инструменты, например, JS.

2.28. CSS Grid

W3C описывает модуль CSS Grid Layout как систему двумерного макета, оптимизированного для дизайна пользовательского интерфейса. Главная идея, лежащая в основе макета сетки, заключается в разделении веб-страницы на столбцы и строки. В образовавшиеся области сетки можно помещать элементы сетки, а управлять их размерами и расположением можно с помощью специальных свойств модуля.

Кроме того, благодаря своей способности явно размещать элементы в сетке, Grid Layout позволяет кардинально преобразовывать структуру визуального макета (отображаемого на экране), не требуя соответствующих изменений разметки.

Хотя многие макеты могут быть отображены с помощью Grid или Flexbox, у каждого есть свои особенности. Grid обеспечивает двухмерное выравнивание, использует нисходящий подход к макету, допускает явное перекрытие элементов и обладает более мощными связующими возможностями. Flexbox фокусируется на распределении пространства по оси, использует более простой восходящий подход к макету, может использовать систему переноса строк на основе размера контента для управления своей вторичной осью и опирается на базовую иерархию разметки для построения более сложных макетов.

Во всех примерах будет рассмотрен стандартный синтаксис. Если вы захотите адаптировать синтаксис для IE10-11 и Microsoft Edge, воспользуйтесь руководством Microsoft Developer Network Grid layout.

Список текущих багов и неполных реализаций приведен в статье Rachel Andrew GridBugs.

Руководство по CSS Grid Layout

Содержание:
1. Концепция сетки и основные понятия
2. Создание контейнера-сетки: значения grid и inline-grid свойства display
3. Определение сетки
3.1. Как задать количество строк и столбцов: свойства grid-template-rows и grid-template-columns
3.2. Именованные области: свойство grid-template-areas
3.3. Сокращенная запись явного объявления сетки: свойство grid-template
3.4. Неявная сетка
3.4.1. Автоматическое создание дорожек сетки: свойства grid-auto-rows и grid-auto-columns
3.4.2. Автоматическое размещение: свойство grid-auto-flow
3.5. Сокращенная запись сетки: свойство grid
4. Элементы сетки
5. Размещение и переупорядочивание элементов сетки
5.1. Размещение с помощью линий сетки: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end
5.2. Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area
6. Выравнивание элементов сетки и промежутки между элементами
6.4. Промежутки между элементами сетки: свойства row-gap, column-gap и gap

Поддержка браузерами

IE: 10.0 -ms-
Edge: 16.0, 12.0 -ms-
Firefox: 52.0
Chrome: 57.0
Safari: 10.1
Opera: 44.0
iOS Safari: 10.3
Opera Mini: —
Android Browser: 67.0
Chrome for Android: 70.0

1. Концепция сетки и основные понятия

Сетка (grid) представляет собой набор пересекающихся горизонтальных и вертикальных линий, делящих пространство grid-контейнера на области сетки, в которые могут быть помещены элементы сетки.

Линии сетки (grid lines) — это невидимые горизонтальные и вертикальные разделительные линии, они существуют по обе стороны от строки и столбца. На них можно ссылаться по числовому индексу (используя свойства grid-column-start , grid-column-end , grid-row-start и grid-row-end ) или имени, заданному в CSS-коде. Числовые индексы сетки зависят от стиля языка, поэтому первым столбцом может быть как самый левый, так и самый правый столбец.

Выделяют две группы линий сетки: одна группа определяет столбцы, которые проходят вдоль оси блока (ось столбцов), и перпендикулярная группа, определяющая строки, простирающиеся вдоль линейной оси (ось строк), в соответствии с CSS3 режимом записи.

Дорожка сетки (grid track) — пространство между двумя соседними линиями сетки, используется для определения либо столбца, либо строки сетки. Дорожка идет от одного края контейнера к другому, размер зависит от расположения линий сетки, которые ее определяют. Дорожки сетки аналогичны столбцам и строкам таблицы. По умолчанию смежные дорожки плотно прилегают друг к другу, задать расстояние между ними можно с помощью свойств row-gap , column-gap и gap .

Ячейка сетки (grid cell) — пространство, ограниченное четырьмя линиями сетки, аналогично ячейке таблицы. Ячейка сетки — это область, в которой можно разместить контент. Это наименьшая единица сетки, на которую можно ссылаться при позиционировании элементов сетки. К ячейкам сетки нельзя обращаться напрямую с помощью CSS-свойств.

Область сетки (grid area) — прямоугольная область, ограниченная четырьмя линиями сетки и состоящая из одной или нескольких соседних ячеек. Область может быть такой же маленькой, как одна ячейка, или такой же большой, как все ячейки сетки. Область сетки может быть задана явно с помощью свойства grid-template-areas , по умолчанию на нее ссылаются ограничивающие линии сетки.

Элементы сетки (grid items) — отдельные элементы, которые назначаются области сетки (или ячейке сетки). Каждый контейнер-сетка включает ноль и более элементов сетки; каждый дочерний элемент контейнера-сетки автоматически становится элементом сетки.

Дорожки, ячейки и области сетки построены из линий сетки. Тем не менее не требуется, чтобы все области сетки были заполнены элементами, вполне возможно, что некоторые или даже большинство ячеек сетки будут пустыми от любого содержимого. Также возможно, что элементы сетки будут перекрывать друг друга, либо определять перекрывающиеся области сетки.

2. Создание контейнера-сетки: значения grid и inline-grid свойства display

Для создания макета на основе сетки необходимо определить контейнер-сетку.

Контейнер-сетка (grid container) — это блок, который устанавливает контекст форматирования по типу сетки, то есть создает область с сеткой, а дочерние элементы располагаются в соответствии с правилами компоновки сетки, а не блочной компоновки. Когда вы определяете контейнер сетки с помощью display: grid или display: inline-grid , вы создаете новый контекст форматирования для содержимого этого контейнера, который влияет только на дочерние элементы сетки.

.grid-container < display: grid; grid-template-areas: "post-1 post-1 post-2" "post-1 post-1 post-3" "post-6 post-5 post-4"; grid-template-rows: repeat(3, 200px); grid-template-columns: repeat(3, 1fr); >.post-1 < grid-area: post-1; >.post-2 < grid-area: post-2; >.post-3 < grid-area: post-3; >.post-4 < grid-area: post-4; >.post-5 < grid-area: post-5; >.post-6

3.3. Сокращенная запись явного объявления сетки: свойство grid-template

Свойство grid-template является сокращением для установки свойств grid-template-rows , grid-template-columns и grid-template-areas в одном объявлении.

Свойство не наследуется.

grid-template
Значения:
none	Устанавливает для всех трех свойств начальные значения none .
значение grid-template-rows / grid-template-columns	Устанавливает grid-template-rows и значение grid-template-columns в указанные значения, а grid-template-areas в значение none .
имена линий сетки или последовательность идентификаторов, заключенная в кавычки и размер дорожки или именованные линии сетки или + /явный список дорожек	Устанавливает grid-template-areas для перечисленных последовательностей идентификаторов. Устанавливает для grid-template-rows указанные значения размеров дорожек, следующие за каждой последовательностью идентификаторов (выставляя auto для любых отсутствующих размеров), и объединяет в именованных линиях сетки, определенных до / после каждого размера. Устанавливает grid-template-columns в список дорожек, указанный после косой черты (или ни одного, если не указан).

.grid-container < display: grid; grid-template: repeat(3, 200px)/repeat(3, 1fr); >.post-1 < grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3; >.post-2 < grid-row-start: 1; grid-row-end: 2; grid-column-start: 3; grid-column-end: 4; >.

.grid-container < display: grid; grid-template: [start] "post-1 post-1 post-2" 200px [row2] [row2] "post-1 post-1 post-3" 200px [row3] [row3] "post-6 post-5 post-4" 200px [row-end] / 1fr 1fr 1fr; >.post-1 < grid-area: post-1; >.post-2 < grid-area: post-2; >.

Функция repeat() не разрешена для определения списка дорожек в этом свойстве, если используются именованные области сетки (сетка просто не будет отрисована).

3.4. Неявная сетка

3.4.1. Автоматическое создание дорожек сетки: свойства grid-auto-rows и grid-auto-columns

Если элемент сетки расположен в строке или столбце, размер которых не определен явно grid-template-rows или grid-template-columns , создаются неявные дорожки сетки для его хранения. Это может произойти в случае, если строка или столбец оказались за пределами установленных размеров сетки.

По умолчанию эти автоматически добавляемые дорожки имеют минимальный необходимый размер. Свойства grid-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее.

Свойства не наследуются.

grid-auto-columns, grid-auto-rows
Значения:
auto	Значение по умолчанию.
размер дорожки +	В качестве размера дорожки может использоваться любое значение, допустимое для задания размеров дорожек сетки.

.grid-container < max-width: 710px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,100px); grid-auto-rows: 50px; >.post-1 < grid-column: 1/3; grid-row: 1/3; >.post-2 < grid-column: 3; grid-row: 1; >.post-3 < grid-column: 3; grid-row: 2; >.post-4 < grid-column: 3; grid-row: 3; >.post-5 < grid-column: 2; grid-row: 3; >.post-6

3.4.2. Автоматическое размещение: свойство grid-auto-flow

Элементы сетки, которые не размещены явно, автоматически помещаются в незанятое пространство в контейнере-сетке с помощью алгоритма автоматического размещения. Свойство grid-auto-flow управляет автоматическим размещением элементов сетки без явного положения. После заполнения явной сетки (или если явной сетки нет) автоматическое размещение также приведет к генерации неявных дорожек сетки.

Свойство не наследуется.

grid-auto-flow
Значения:
row	Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди слева-направо (для LTR-языков), добавляя новые строки по мере необходимости. Значение по умолчанию.
column	Алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости.
dense	Алгоритм «плотной» укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами.

Свойство будет полезным при создании компактных галерей, если для изображений не задан порядок, в котором они должны быть расположены. Для каждого элемента сетки браузер сканирует всю сетку в заданном направлении потока (строка или столбец), начиная от начальной точки потока (верхний левый угол, на языках LTR — слева направо), пока не найдет место, куда поместится этот элемент сетки.

.grid-container < max-width: 710px; margin: 10px auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: 200px; grid-auto-flow: dense; >.item5 < grid-column: span 2; grid-row: span 2; >.item6

3.5. Сокращенная запись сетки: свойство grid

Свойство grid задает все явные grid-template-rows , grid-template-columns и grid-template-areas и все неявные свойства сетки grid-auto-flow , grid-auto-rows и grid-auto-columns в одном объявлении. Оно не сбрасывает свойства row-gap / column-gap . Его синтаксис соответствует grid-template , а также дополнительной синтаксической форме для определения автоматического размещения элементов сетки:

Путем явного задания дорожек на одной оси (устанавливая grid-template-rows или grid-template-columns и задавая другим значение none ), и задавая, как автоматически повторять дорожки на другой оси (устанавливая grid-auto-rows или grid-auto-columns и задавая другим auto ).

Для grid-auto-flow также устанавливается одно из трех допустимых значений. Все остальные подсвойства grid сбрасываются к своим начальным значениям.

/* значения для grid-template */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill, 50px); /* значения для grid-template-rows / [auto-flow && dense? ] grid-auto-columns? */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; /* значения для [ auto-flow && dense? ] grid-auto-rows? / grid-template-columns */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

4. Элементы сетки

Контейнер-сетка устанавливает новый контекст форматирования для элементов сетки, который обуславливает следующие особенности:

Для элементов сетки блокируется их значение свойства display . Значение display: inline-block вычисляется в display: block , анонимные блоки текста также занимают всю ширину контейнера и образуют разрыв строки.
Размер элемента сетки в пределах содержащего блока определяется его областью сетки.
Расчеты элементов сетки для width: auto и height: auto зависят от их значений align-self :
align-self: normal; — незамещаемые элементы заполняют область сетки, замещаемые элементы используют собственные размеры;
align-self: stretch; — обе категории элементов заполняют область сетки;
align-self: start/center и т.д. — незамещаемые элементы устанавливают размеры в соответствии со своим содержимым, замещаемые элементы используют собственные размеры.
Поскольку соседние элементы сетки находятся в независимых областях сетки, то поля соседних элементов сетки margin не схлопываются.
Браузеры по-разному обрабатывают процентные значения свойств margin и padding , поэтому не рекомендуется использовать их при задании значений этих свойств.
Поля margin: auto; расширяются, поглощая свободное пространство в соответствующем измерении, поэтому могут использоваться для выравнивания элемента.

5. Размещение и переупорядочивание элементов сетки

Свойства размещения позволяют свободно упорядочивать и переупорядочивать содержимое сетки таким образом, что визуальное представление может значительно отличаться от порядка элементов в html-документе.

5.1. Размещение с помощью линий сетки: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end

Каждый элемент сетки связан с областью сетки, которая определяет содержащий блок для элемента сетки. Положение элементов сетки определяется расположением линий сетки и диапазоном сетки — количеством занимаемых дорожек сетки. По умолчанию элемент сетки занимает одну дорожку на каждой оси. Поэтому можно опустить значение grid-column-end или grid-row-end .

Свойства размещения на сетке — grid-row-start , grid-row-end , grid-column-start и grid-column-end и их краткая запись grid-row , grid-column и grid-area позволяют определить размещение элемента сетки, предоставив любую (или ноль) из следующих шести частей информации:

Строка	Столбец
Начало	Начальная линия строки	Начальная линия столбца
Конец	Конечная линия строки	Конечная линия столбца
Диапазон	Диапазон строк	Диапазон столбцов

grid-row-start, grid-column-start, grid-row-end, grid-column-end
Значения:
auto	Свойство не влияет на размещение элемента сетки, указывая на автоматическое размещение или диапазон по умолчанию, равный единице.
имя линии	Начальная и конечная линия строки/столбца задаются в именованных линий сетки.
целое число и имя линии?	Начальная и конечная линия строки/столбца задаются с помощью целого числа (отрицательное порядковый номер линии сетки будет отсчитываться с противоположного края явной сетки) и (необязательно) имени линии.
span и целое число или имя линии	Ключевое слово span и целое положительное число/имя линии задают диапазон ячеек для размещения элемента сетки.

.grid-container < display: grid; grid-template-rows: 200px 200px 200px; grid-template-columns: 1fr 1fr 1fr; >.post-1 < grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3; >.post-2 < grid-row-start: 1; grid-column-start: 3; >.post-3 < grid-row-start: 2; grid-column-start: 3; >.post-4 < grid-row-start: 3; grid-column-start: 3; >.post-5 < grid-row-start: 3; grid-column-start: 2; >.post-6

5.1.1. Именованные линии сетки

Хотя на линии сетки можно ссылаться по их числовому индексу, именованные линии облегчают понимание и использование свойств размещения сетки. Линии могут быть названы явно в свойствах grid-template-rows и grid-template-columns или неявно путем создания именованных областей сетки в свойстве grid-template-areas .

Имя линии может быть любым, при указании в значении свойства оно заключается в квадратные скобки. В качестве имени линии нельзя использовать слово span .

.grid-container < display: grid; grid-template-rows: [start] 200px [row2] 200px [row3] 200px [row-end]; grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [col-end]; >.post-1 < grid-row-start: span 2; grid-column-start: span 2; >.post-2 < grid-row-start: start; grid-column-start: col3; >.post-3 < grid-row-start: row2; grid-column-start: col3; >.post-4 < grid-row-start: row3; grid-column-start: col3; >.post-5 < grid-row-start: row3; grid-column-start: col2; >.post-6

Имена линий добавляются к неявным именам линий сетки, созданным свойством grid-template-areas , принимая вид name-start и name-end . Имена линий сетки никогда не заменяют другие имена линий сетки. Вместо этого они просто накапливаются.

5.2. Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area

Свойства grid-row и grid-column являются сокращенными именами для свойств grid-row-start / grid-row-end и grid-column-start / grid-column-end соответственно.

Если заданы два значения, первое (до косой черты) устанавливается для параметра grid-row-start/grid-column-start , второе — для grid-row-end/grid-column-end . Если второе значение опущено, а первое указано в формате пользовательского идентификатора, то grid-row-end/grid-column-end также устанавливается в пользовательское имя сетки. В противном случае, оно вычисляется в auto .

Для свойства grid-area если указано четыре значения, первое устанавливается для grid-row-start , второе — для grid-column-start , третье — для grid-row-end , четвертое — для grid-column-end .

Если grid-column-end/grid-row-end не указан, а grid-column-start/grid-row-start указан в форме пользовательского имени, то для grid-column-end/grid-row-end также устанавливается значение пользовательского имени линии; в противном случае он установлен на auto .

Когда grid-column-start опущен, а значение grid-row-start указан в форме пользовательского имени, оно устанавливается для всех четырех значений. В противном случае оно устанавливается на auto .

grid-area
grid-row		grid-column
grid-row-start	grid-row-end	grid-column-start	grid-column-end

grid-row: a; grid-row: auto; grid-column: 2; grid-row: 1 / -1; grid-column: sidebar-start / footer-end;

grid-area: a; grid-area: auto; grid-area: 2 / 4; grid-area: 1 / 3 / -1; grid-area: header-start / sidebar-start / footer-end / sidebar-start;

5.3. Переупорядочивание элементов сетки

Свойство order также применяется к элементам сетки. Это влияет на их автоматическое размещение и порядок отрисовки. Свойство должно использоваться только для визуального, а не логического переупорядочения контента.

6. Выравнивание элементов сетки и промежутки между элементами

Для выравнивания элементов сетки можно использовать свойство margin , аналогично, как работает это свойство для блочных элементов.

По умолчанию элементы сетки растягиваются, чтобы заполнить свою область сетки. Тем не менее, если justify-self или align-self вычисляют значение, отличное от stretch или задано margin: auto , элементы сетки будут автоматически изменяться в соответствии с их содержимым.

6.1. Выравнивание с помощью margin: auto

При расчете размеров дорожек сетки margin: auto обрабатываются как 0 . Они поглощают положительное свободное пространство, предшествующее выравниванием с помощью свойств выравнивания. Переполняющиеся элементы игнорируют свои автоматические поля и переполнение, как указано в их свойствах выравнивания блоков.

6.2. Выравнивание по оси строки

Элементы сетки могут быть выровнены в направлении оси строки (по горизонтали для LTR-языков) с помощью свойства justify-self или свойства justify-items (заданного для контейнера-сетки).

6.3. Выравнивание по оси столбца

Элементы сетки могут выровнены в направлении, перпендикулярном оси строки с помощью свойства align-self или свойства align-items , заданного для контейнера-сетки.

6.4. Промежутки между элементами сетки: свойства row-gap, column-gap и gap

Свойства row-gap и column-gap (и их сокращенная запись gap ), если они указаны в контейнере сетки, определяют промежутки между строками и столбцами сетки. При определении размера дорожки каждый промежуток рассматривается как дополнительная пустая дорожка указанного размера. Дополнительный промежуток также может быть добавлен между дорожками за счет свойств justify-content и align-content .

Промежутки добавляются только между двумя дорожками сетки, то есть они не добавляются перед первой и после последней дорожки.