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

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

  • автор:

minmax()

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020 .

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.

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

=
minmax( min , max )

Пример

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

Совместимость с браузерами

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 6 янв. 2024 г. 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– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Подробности об использовании CSS-функции minmax() в Grid-макетах

Существует множество руководств, в которых рассматриваются общие вопросы работы с CSS Grid, с механизмом, позволяющим создавать сеточные макеты. Я и сам немало об этом писал. Но я обратил внимание на то, что у многих разработчиков возникают сложности с использованием CSS-функции minmax() . Пожалуй, дело тут в том, что большинство существующих публикаций на эту тему либо не вдаются в детали, либо не включают в себя достаточного количества пояснений и примеров из реального мира. А minmax() — это очень мощная и полезная функция. Именно по этой причине я и решил написать данную статью. Это — нечто вроде «полного руководства по minmax() », задача которого — дать читателям то, чего не дают им другие публикации на эту тему.

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

Общие вопросы использования minmax() в Grid-макетах

В спецификации CSS о функции minmax(min, max) сказано, что она определяет диапазон размеров, которые больше или равны min и меньше или равны max .

Эту функцию можно использовать в качестве значения, задающего параметры столбцов или строк Grid-макета. Рассмотрим простой пример:

.o-grid

Вот как это будет выглядеть на схеме.

Результат применения функции minmax() при создании Grid-макета

Проанализируем этот макет:

  1. Здесь имеется сетка с тремя столбцами.
  2. Ширина первого столбца задана как minmax(200px, 500px) . Минимальная ширина этого столбца составляет 200px , максимальная — 500px .
  3. Два других столбца имеют ширину 1fr . Это означает, что они займут оставшееся свободное пространство.

Горизонтальная полоса прокрутки

В результате оказывается, что функция minmax() , сама по себе, не поддерживает создание отзывчивых макетов. А это значит, что поведением страницы приложения на экранах разной ширины нам нужно управлять самостоятельно. Ниже, в разделе практических примеров, мы к этому вернёмся.

Проверка правильности использования функции minmax()

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

Если значение min больше значения max — значение max игнорируется

Кроме того, важно помнить о том, что значение вроде 1fr нельзя использовать в качестве значения min . Оно может быть использовано только в роли значения max . При этом подобная ситуация хуже, чем та, когда min больше, чем max ! Система проигнорирует всю конструкцию, содержащую подобное объявление.

Нельзя использовать 1fr в качестве значения min

Использование нуля в качестве значения min функции minmax()

Что произойдёт в том случае, если попытаться воспользоваться конструкцией вида minmax(0, 500px) ? Пожалуй, вы уже знаете ответ на этот вопрос. Ширина столбца будет, как минимум, нулевой, и при этом она не превысит 500px . То есть — ширина столбца будет меняться в достаточно широких пределах.

Ширина столбца может изменяться в диапазоне от 0 до 500px

Простой сеточный макет

Представим, что нам надо создать сеточный макет, состоящий из 3 колонок. Мы поступим так:

.o-grid

Колонки будут иметь минимальную ширину в 200px . Вот как они будут выглядеть.

Макет, минимальная ширина столбцов которого равна 200px

Избежать троекратного повторения конструкции minmax(200px, 1fr) можно, воспользовавшись функцией repeat() :

.o-grid

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

▍Ручное изменение количества столбцов

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

▍Проблема появления горизонтальной полосы прокрутки

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

Горизонтальная полоса прокрутки

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

При разработке Flexbox-макетов это делается путём добавления свойства flex-wrap: wrap к родительскому элементу макета:

.parent

Flexbox-макет, в котором используется свойство flex-wrap: wrap, и макет, в котором это свойство не используется

При проектировании Grid-макетов для достижения подобного эффекта можно воспользоваться ключевыми словами auto-fill и auto-fit .

Сеточный макет, в котором применяются auto-fit/auto-fill, и макет, в котором эти ключевые слова не применяются

Использование ключевых слов auto-fit и auto-fill

Для того чтобы справиться с проблемой жёсткой настройки количества столбцов сеточного макета, мы можем воспользоваться возможностями ключевых слов auto-fit и auto-fill . При этом надо отметить, что между ними существует довольно-таки тонкое различие.

Так, при использовании auto-fit и при наличии свободного места элементы сетки будут растянуты. А применение auto-fill приводит к тому, что элементы растягиваться не будут. В результате дополнительное свободное пространство окажется незанятым, ширина элементов меняться не будет.

Результаты применения ключевых слов auto-fill и auto-fit

При использовании этих ключевых слов может получиться один и тот же результат. Это зависит от ширины области просмотра страницы. Но при определённой ширине области просмотра различия между ними будут уже вполне заметными.

Вот видеозапись, в которой показано поведение макетов, созданных, соответственно, с использованием auto-fill и auto-fit .

Исследование поведения макетов, созданных с использованием ключевых слов auto-fill и auto-fit

▍Распределение свободного пространства между столбцами auto-fit-макета

Вот видео, в котором прямоугольник, обведённый пунктирной линией, представляет свободное пространство. Когда, при использовании ключевого слова auto-fit , ширина области просмотра достаточно велика, браузер «свернёт» это свободное пространство и распределит его ширину между элементами сетки.

Распределение свободного пространства между столбцами auto-fit-макета

▍Распределение свободного пространства между столбцами auto-fill-макета

Если говорить о применении ключевого слова auto-fill , то тут браузер поступает со свободным пространством иначе. А именно, при увеличении ширины области просмотра ширина элементов не увеличивается. При этом размер свободного пространства (оно, в этом видео, выделено пунктиром) растёт.

Распределение свободного пространства между столбцами auto-fill-макета

Сценарии использования и практические примеры

▍Карточки, основанные на сеточном макете

Полагаю, что функцию minmax() чаще всего используют для оформления карточек, применяя её при создании элемента-контейнера.

.wrapper

Когда я начал изучать технологию Grid, я неуютно чувствовал себя, глядя на свойство grid-template-columns , использованное в этом примере. Тут важно обратить внимание на то, как поведёт себя страница в областях просмотра, ширина которых меньше 250px . Дело в том, что в таких ситуациях на экране появится горизонтальная полоса прокрутки.

Появление горизонтальной полосы прокрутки в области просмотра, ширина которой меньше 250px

Решить эту проблему можно двумя способами. Первый заключается в использовании медиа-запросов. В основе этого способа лежит идея, в соответствии с которой grid-template-columns устанавливается в 1fr . А когда ширина области просмотра достаточно велика — применяется minmax() :

.wrapper < display: grid; grid-template-columns: 1fr; grid-gap: 1rem; >@media (min-width: 300px) < .wrapper < grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); >> 

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

.wrapper

Я использовал тут, в качестве первого значения функции minmax() , функцию сравнения min() . Вот что здесь происходит:

  • Если ширина области просмотра меньше, чем 250px , первым значением, передаваемым minmax() , будет 100% ширины родительского элемента.
  • Если ширина области просмотра будет больше, чем 250px , тогда первым значением minmax() будет 250px .

▍Использование единицы измерения ch при настройке элемента-контейнера

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

.wrapper

Первый и последний столбцы играют вспомогательную роль, управляя свободным пространством. Нас тут интересует центральный столбец. Обратите внимание на то, что при его настройке использована конструкция вида minmax(auto, 70ch) . Это означает, что максимальной шириной данного столбца является ширина, которую занимают 70 символов, выстроенных в одну строку. Это — идеальное количество символов на строку, обеспечивающее комфортное чтение текста.

Макет, предназначенный для вывода текста статьи

Этот макет будет хорошо смотреться на экранах разных размеров, в том числе — на мобильных устройствах. Дело в том, что ширина первой и последней колонок может уменьшаться вплоть до минимального значения, соответствующего 1rem . Вот как эта страница будет выглядеть на узком экране мобильного устройства.

Статья на экране мобильного устройства

▍Проблема, возникающая при необдуманном использовании ключевого слова auto-fit

У того, кто впервые узнал о ключевом слове auto-fit , может возникнуть желание использовать его повсюду. Но тут есть одна проблема, которая проявляется тогда, когда содержимое сетки (например — количество карточек) меняется, а разработчик не контролирует это содержимое.

.wrapper

Тут описана сетка, используемая для вывода карточек. Когда имеется 4 карточки — макет выглядит замечательно. Но если карточка всего одна — она растянется на всё свободное пространство.

Проблема необдуманного использования auto-fit

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

Вывод карточки с изображением

Полагаю, теперь суть этой проблемы совершенно очевидна. Поэтому предлагаю пользоваться ключевым словом auto-fit ответственно. В описанной ситуации им вполне можно воспользоваться тогда, когда в карточках нет изображений. Если же в карточках имеются изображения — пользоваться auto-fit я не рекомендую.

Пользуетесь ли вы CSS-функцией minmax() в Grid-макетах?

Как работает функция minmax()

Одна из невероятно полезных новинок спецификации CSS Grid Layout — функция minmax() . Эта функция открывает нам возможность писать более мощный и лаконичный CSS, позволяя задавать в качестве значения для грид-полосы функцию, включающую и минимальное, и максимальное значения.

Функция minmax()

Функция minmax() принимает два параметра, минимальное значение и максимальное.

minmax(min, max)

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

Функция minmax() принимает 6 типов значений:

  • Единицы длины
  • Проценты
  • Гибкие размеры
  • max-content
  • min-content
  • auto

Рассмотрим примеры каждого из них.

Длина

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

grid-

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

.grid

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

Проценты

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

.grid

Как бы мы не сужали окно браузера, желтая ячейка никогда не станет меньше 200px. Но когда место есть, она растягивается до максимума в половину ширины грида.

Гибкие размеры

Гибкие размеры — новая единица, тоже введенная спецификацией CSS Grid Layout, как и функция minmax() . Эта величина, для которой используется единица fr , представляет собой долю свободного пространства в грид-контейнере. Например, скажем, у нас есть грид шириной 100px с двумя колонками. У одной колонки фиксированная ширина 20px , а у другой ширина 1fr . У второй колонки фактически будет ширина 80px , поскольку она занимает всё оставшееся свободное место в гриде.

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

.grid

Поскольку при больших размерах окна ширина всех колонок 1fr, они делят пространство в гриде поровну.

max-content

Ключевое слово max-content — специальное значение, представляющее собой «идеальный размер» ячейки. Это наименьший возможный размер ячейки, при котором содержимое умещается в ней свободно. Например, если содержимое ячейки — предложение текста, идеальной шириной ячейки будет полная длина этого предложения, если записать его в одну строку без переносов.

Если взять наш предыдущий пример, давайте укажем для желтой грид-ячейки и минимальный, и максимальный размер, равный max-content .

.grid

Как видно, колонка растягивается в ширину, чтобы вместить всю длину строки. Поскольку и максимальному, и минимальному значениям указано max-content , ширина колонки остается постоянной (прим. перев.: того же эффекта можно было бы добиться и без minmax , указав просто grid-template-columns: max-content 1fr 1fr ).

min-content

Ключевое слово min-content , как и max-content — особое значение. Оно представляет собой наименьший возможный размер, при котором в ячейке еще не возникает переполнения, если этого переполнения можно хоть как-то избежать.

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

.grid

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

auto

Наконец, у нас есть auto . В зависимости от того, используется оно как максимальное или минимальное значение в функции minmax() , его смысл меняется.

Если значение auto используется в качестве максимума, оно эквивалентно значению max-content . А если в качестве минимума, то значение auto представляет собой наибольший минимальный размер для ячейки. Этот «наибольший минимальный размер» отличается от значения min-content и задается свойствами min-width/min-height .

В качестве иллюстрации — вот что происходит, если задать желтой грид-ячейке в нашем примере auto для минимума и максимума.

.grid

Использование функции minmax() : отзывчивый дизайн без медиавыражений

Как мы видели, использование функции minmax() подходит в нескольких случаях, и ее можно использовать несколькими способами. Но, наверное, самое популярное и полезное применение функции minmax() — возможность создавать отзывчивые макеты без помощи каких-либо медиавыражений.

Возьмем для примера такой грид:

У каждой колонки в гриде минимальная ширина 200px. При изменении размеров окна браузера число колонок меняется, чтобы вместить их идеальную ширину. С помощью CSS-гридов и функции minmax() это делается всего лишь 2 строчками CSS:

.grid

Помимо функции minmax() , здесь еще два ключевых момента:

  • repeat() : эта функция позволяет нам указывать одно и то же значение для нескольких колонок в гриде. Она принимает два значения: количество повторений и значение, которое надо повторить.
  • auto-fit : это ключевое слово можно использовать с функцией repeat() вместо количества повторений. Оно гибко меняет используемое число колонок в зависимости от ширины каждой из них.

Правда, одно, на мой взгляд серьезное, ограничение этого приема — то, что это работает только при равной ширине всех колонок. Мы вынуждены пользоваться функцией repeat() с ключевым словом auto-fit , так как это дает возможность сделать число колонок гибким. Но всё же и это может быть крайне полезным решением в подходящих обстоятельствах.

P.S. Это тоже может быть интересно:
  • «Запашки» кода React-компонентов
  • Не боритесь с каскадом, управляйте им!
  • Псевдокласс :has() — не только «родительский селектор»

Если вам понравилась статья, поделитесь ей!

grid-template-columns

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020 .

CSS-свойство grid-template-columns определяет имена линий и размеры грид-колонок.

Интерактивный пример

Синтаксис

/* Ключевые слова */ grid-template-columns: none; /* Значения типа */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; grid-template-columns: minmax(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); grid-template-columns: subgrid; grid-template-columns: masonry; /* Значения типа */ grid-template-columns: 200px repeat(auto-fill, 100px) 300px; grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid-template-columns: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-columns: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* Глобальные значения */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: revert; grid-template-columns: unset; 

Значения

Указывает на отсутствие явной грид-раскладки. Все колонки будут создаваться неявным образом, а их размер будет определяться свойством grid-auto-columns (en-US).

Неотрицательная длина, задающая ширину колонки.

Неотрицательное значение с единицей измерения fr , определяющая показатель расширения. Каждая грид-полоса, заданная значением , занимает оставшееся свободное пространство пропорционально указанному показателю расширения.

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

Ключевое слово, представляющее наибольший размер максимального содержимого среди всех грид-элементов в грид-полосе. Например, если в первом элементе грид-полосы будет находиться одно предложение: «Repetitio est mater studiorum», а во втором — «Dum spiro, spero», то максимальное содержимое будет определяться размером самого длинного предложения среди всех грид-элементов — «Repetitio est mater studiorum».

Ключевое слово, представляющее наибольший размер минимального содержимого среди всех грид-элементов в грид-полосе. Например, если в первом элементе грид-полосы будет находиться одно предложение: «Repetitio est mater studiorum», а во втором — «Dum spiro, spero», то минимальное содержимое будет определяться размером самого длинного слова среди всех предложений в грид—элементах — «studiorum».

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

При использовании в качестве максимального значения представляет собой размер наибольшего элемента среди всех элементов грид-полосы, что равнозначно max-content (en-US).

При использовании в качестве минимального значения представляет собой минимальный размер элемента среди всех элементов в грид-полосе (определённый свойствами min-width / min-height у элементов). Часто, хотя и не всегда, идентичен размеру min-content (en-US).

При использовании вне функции minmax() , auto представляет диапазон между минимумом и максимумом, описанным выше. В большинстве случаев это то же самое, что и minmax(min-content,max-content) .

Примечание: размеры полос, заданные значением auto (и только auto ) могут быть растянуты с помощью свойств align-content и justify-content . Поэтому по умолчанию грид-полоса с размером auto будет занимать всё оставшееся свободное пространство в грид-контейнере.

Может быть выражен формулой max(minimum, min(limit, max-content)) , где minimum представляет собой auto -минимум (который часто, но не всегда представляет наименьший размер минимального содержимого) и limit — любое значение или функция для определения размера полосы, переданная в качестве аргумента в fit-content() . По-другому можно сказать, что fit-content() получается выбором наименьшего значения среди minmax(auto, max-content) , minmax(auto, limit) .

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

Значение masonry указывает на то, что оси должны выстраиваться согласно алгоритму masonry (плиточной раскладки).

Значение subgrid указывает, что грид-раскладка примет размеры родительского грид-контейнера на соответствующих осях. Таким образом размеры колонок и рядов не задаются явно, а берутся из определения родительской грид-раскладки.

Предупреждение: Значение masonry появилось в CSS-спецификации Grid Level 3 и на данный момент в качестве эксперимента реализовано в Firefox и активируется через флаг в настройках.

Значение subgrid представлено в CSS-спецификации Grid Level 2 и пока что реализовано только в Firefox с 71 версии.

Формальное определение

Начальное значение none
Применяется к сеточные контейнеры
Наследуется нет
Проценты относятся к соответствующему размеру области содержимого
Обработка значения как указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation type simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list

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

grid-template-columns =
none | (en-US)
| (en-US)
| (en-US)
subgrid ? (en-US)

=
[ (en-US) ? (en-US) [ (en-US) | (en-US) ] (en-US) ] (en-US) + (en-US) ? (en-US)

=
[ (en-US) ? (en-US) [ (en-US) | (en-US) ] (en-US) ] (en-US) * (en-US) ? (en-US) [ (en-US) ? (en-US) [ (en-US) | (en-US) ] (en-US) ] (en-US) * (en-US) ? (en-US)

=
[ (en-US) | (en-US) ] (en-US) + (en-US)

=
‘[‘ * (en-US) ‘]’

=
| (en-US)
minmax( , ) | (en-US)
fit-content( )

=
repeat( [ (en-US) ] (en-US) , [ (en-US) ? (en-US) ] (en-US) + (en-US) ? (en-US) )

=
| (en-US)
minmax( , ) | (en-US)
minmax( , )

=
repeat( [ (en-US) ] (en-US) , [ (en-US) ? (en-US) ] (en-US) + (en-US) ? (en-US) )

=
repeat( [ (en-US) auto-fill | (en-US) auto-fit ] (en-US) , [ (en-US) ? (en-US) ] (en-US) + (en-US) ? (en-US) )

=
repeat( [ (en-US) | (en-US) auto-fill ] (en-US) , + (en-US) )

=
| (en-US)
| (en-US)
min-content | (en-US)
max-content | (en-US)
auto

=
| (en-US)
min-content | (en-US)
max-content | (en-US)
auto

=
| (en-US)

=

Примеры

Определение грид-колонок с размерами

HTML
div id="grid"> div id="areaA">Adiv> div id="areaB">Bdiv> div> 
CSS
#grid  display: grid; width: 100%; grid-template-columns: 50px 1fr; > #areaA  background-color: lime; > #areaB  background-color: yellow; > 
Результат

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

Specification
CSS Grid Layout Module Level 2
# track-sizing
CSS Grid Layout Module Level 2
# subgrids
CSS Grid Layout Module Level 3
# masonry-layout

Совместимость с браузерами

BCD tables only load in the browser

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

  • Связанные CSS-свойства: grid-template-rows , grid-template-areas , grid-template
  • Руководство по грид-раскладке: Основы грид-раскладки — грид-полосы
  • Обучающее видео: Defining a Grid
  • Subgrid

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 6 янв. 2024 г. 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– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *