Столбцы-шаблон-сетки / строки-шаблон-сетки - CSS-хитрости

grid-template-rowsИ grid-template-columnsсвойства являются основными свойствами CSS для создания макета сетки после того , как элемент контекста сетки ( display: grid;).

Есть также -ms-grid-columnsи -ms-grid-rows, которые являются старой версией IE. Вы можете рассмотреть возможность автоприставки, чтобы получить их, или нет, ваш звонок. Был также странный период, когда они были grid-definition-columnsи grid-definition-rows, но это уже не то.

Вот пример из документации Microsoft:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Это определяет количество строк / столбцов в сетке, а также их размер.

Эти два свойства поддерживают список значений, разделенных пробелами. Каждое значение будет определять новый столбец / строку путем установки измерения. Список из 4 значений даст 4 столбца / строки. Одно значение даст один столбец / строку.

Принимаемые значения включают длину (например , pxили em), проценты, фракции ( fr; см ниже), auto(или fit-content), min-content, max-content, и minmax(), или repeat()функцию.

В приведенном выше примере кода это означает:

Столбец 1 ( ключевое слово auto ): столбец соответствует содержимому столбца.
Столбец 2 («100 пикселей»): ширина столбца составляет 100 пикселей.
Столбец 3 («1fr»): столбец занимает одну дробную часть оставшегося места.
Столбец 4 («2fr»): столбец занимает две доли оставшегося места.

Строка 1 («50 пикселей»): высота строки 50 пикселей.
Строка 2 («5em»): высота строки 5 em.
Строка 3 ( ключевое слово min-content ): Строка настолько мала, насколько позволяет контент.
Строка 4 ( ключевое слово auto ): строка соответствует содержимому строки.

повторение()

repeat()Функция была специально разработана для этого модуля. Это позволяет вам определять шаблон, повторяющийся X раз. Нравится repeat(6, 1fr);. Допустим, вы хотите сделать 12 столбцов одинаковой ширины, отстоящих друг от друга с запасом в 1%; вы могли определить 1fr repeat(11, 1% 1fr). Это то же самое, что и 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Единица fr

frБлок может быть использован для grid-rowsи grid-columnsзначения. Это означает «долю доступного пространства». Думайте об этом как о процентном соотношении доступного пространства, когда вы удалили столбцы / строки фиксированного размера и на основе содержимого. Как сказано в спецификации:

Распределение дробного пространства происходит после того, как все размеры строк и столбцов, основанные на длине или содержимом, достигли своего максимума.

Связанный

Наш лучший ресурс по всем вопросам CSS-сетки - это полное руководство по CSS-сетке.

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

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