CSS Grid Minmax Fit-content

Минимальный и максимальный размер. Функция minmax()

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

.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 1fr);
    /* третий столбец не может быть меньше 300px и больше одной фракции */
} 

Контейнер растянется на всё свободное пространство, но не ужмётся меньше 300px.

Значения параметров min и max можно задавать в пикселях, процентах, фракциях. Но есть два специфических значения — max-content и min-content. Их можно использовать самостоятельно или в рамках функции minmax().

начение max-content

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

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr max-content;
} 

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

Значение min-content

Для длинных списков подходит свойство min-content. Оно стремится перенести всё, что переносится, чтобы содержимое ячейки занимало как можно меньше места. Значение min-content сообщает треку: «Ориентируйся на самый маленький — картинку или слово.

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr min-content;
} 

Функция minmax() с параметрами min-content и max-content

Трек со значением minmax(min-content, max-content) будет ориентироваться на контент: не ужмётся меньше содержимого, но и не займёт лишнее место, когда контента мало.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(min-content, max-content);
} 

Ограничение по размеру. Функция fit-content()

Трек с fit-content ориентируется на контент, но всегда стремится к указанному в нём значению. Колонка занимает ширину под размер своего контента. Но она не сможет превзойти значение, указанное в fit-content.

.container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr fit-content(200px);
} 

Ограничивать размер трека удобнее всего одной из двух функций: minmax() и fit-content().

Функция minmax() работает особенно хорошо со свойствами min-content и max-content. Трек со значением minmax(min-content, max-content) не ужмётся меньше своего контента, но и не займёт больше места, чем контенту необходимо.

Функция fit-content() задаёт только верхнюю границу размера трека. Трек со значением fit-content(200px) ужмётся под размер своего контента, но не сможет растянуться больше 200px.

#css-grid