Функция "minmax" в CSS Grid, как она работает?

[Ktina]

В некотором смысле, продолжение предыдущей темы про веб-дизайн.
Как именно работает функция minmax?
Предположим, я даю команду:

grid-template-columns: 100px minmax(50px, 200px);

В этом случае ширина первого столбца будет 100 пикселей, а второго - от 50 до 200. Но сколько именно в каждом конкретном случае? И от чего это зависит? От ширины окна? Но как именно?

Или вот такой пример:

repeat(auto-fill, minmax(60px, 1fr));

Какой размер будут принимать столбцы и в зависимости от чего?

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

[Mental]

Ktina в сообщении #1323240 писал(а):

И от чего это зависит? От ширины окна? Но как именно?

При изменении размеров окна значение будет меняться, но всегда между этими границами.

-- 29.06.2018, 08:29 --

Ktina в сообщении #1323240 писал(а):

Какой размер будут принимать столбцы и в зависимости от чего?

См здесь.

[Ktina]

Mental в сообщении #1323284 писал(а):

При изменении размеров окна значение будет меняться, но всегда между этими границами.

Я понимаю, что будет изменяться, но как именно? Когда она будет 50, когда 200, а когда, скажем, 169?

[Mental]

Ktina в сообщении #1323287 писал(а):

Я понимаю, что будет изменяться, но как именно? Когда она будет 50, когда 200, а когда, скажем, 169?

Если места хватает, то будет 200px. Если нет, то будет постепенно уменьшаться до минимального значения 50px.

[arseniiv]

Ktina в сообщении #1323287 писал(а):

но как именно?

Откройте стандарт, ничего точнее вам нигде (кроме его пересказов) не предложат. Разве что если углубляться в то, что делает каждый конкретный браузер (это делать нужно только в крайней необходимости).

-- Пт июн 29, 2018 18:28:31 --

(Оффтоп)

Эх, во времена древних интернетов просто бы написали «RTFM».

[Ktina]

Mental в сообщении #1323288 писал(а):

Если места хватает, то будет 200px. Если нет, то будет постепенно уменьшаться до минимального значения 50px.

То есть, если я правильно понимаю, по умолчанию объект пытается принять как можно больший размер?
Но как тогда быть с
repeat(auto-fill, minmax(60px, 1fr));
?

[Mental]

Ktina в сообщении #1323480 писал(а):

Но как тогда быть с
repeat(auto-fill, minmax(60px, 1fr));

Вы разобрались, что такое fr?
Здесь размер элемента будет равен доли доступного пространства, но не менее 60px. Если вычисляемый размер будет меньше 60px, то следующий элемент будет размещён ниже на другой строке.

[rockclimber]

Ktina в сообщении #1323480 писал(а):

То есть, если я правильно понимаю, по умолчанию объект пытается принять как можно больший размер?

Совсем-совсем по умолчанию, когда у объекта никаких свойств нигде не прописано, объект принимает размер по размеру своего содержимого. А если содержимого нет, то размер будет нулевой. А дальше идут 100500 разных свойств и их комбинаций (например, разные свойства по-разному работают для строчных/блочных элементов или в зависимости от свойств родительского объекта).