CSS GRID: Using minmax() for Responsive Grids — 13 of 25

Показать описание

Рекомендации по теме

Комментарии

Think of auto-fill trying to get closer to the min value and auto-fit tries to get closer to the max value.

robgillanofficial

It's several months since I took this course, but it has become my main source of truth related to CSS grid and the content and structure of the course, is excellent.

sveinsoermo

Also something important to add for minmax,

You can't use an fr unit for the minimum value when using minmax. It just doesn't work. Ad you see though it is a valid unit for the max value. ❤

clevermissfox

Hi one question: when I use "repeat(auto-fill, 100px) : altough the width stays at 100px, the cells are still expanding in height by default to fit it's content. Why isn't this happening at youre side?

kevinegal

The first example seems like it would be good for responsive navigation

Bayo

Thanks for the video. What's the extension that you use to show the overlay grid?

jcleefw

Hi. I dunno why
grid-template-columns: fit-content(500px) 100px 100px 100px;
dosent work for me.
Instead,
grid-template-columns: minmax(auto, 500px) 100px 100px 100px;
is worked just fine.
Does anyone have any idea?

espressoly

Hey! I tried to put min-content as the first value in the minmax, so i dont have to care about how wide should my grid items be to contain all of my content properly, but it sadly didnt work, each of my items occupied the entire width of their own column. Any idea why that happens? Isn't min-content supposed to mean that the columns width should be the minimum that can contain the content without any overflow?

leventemathe