- So let me explain minmax,
This is a unit that we can use inside of Grid
to define our columns and our layouts.
It's pretty powerful and it does a couple different things.
You may have already seen some examples
of a kind of, classic bunch of boxes in rows, in columns,
where their each of the boxes is flexible,
each of those columns is flexible.
They kind of grow and shrink
with the amount of space that's available.
And at a certain point,
you end up with more columns and fewer columns.
With responsive web design, with media queries,
and with columns that are sized using percents,
in a float based world, you have to tell the browser
how many columns to make at any given point.
But with Grid and with this minmax syntax
you don't need to do that.
So here, on the container I've said, display grid,
grid-template-columns, repeat auto-fit minmax 100 to one fr.
I have another video where I go into this particular
kind of example in more details so you can look at that one.
But the heart of this, is this minmax syntaxm,
where we're going to say I want each of those columns
to be a minimum of 100 pixels and a maximum of one fr.
Here's a different way that I'm using minmax, where,
instead of instead of using that repeat autofit syntax,
I'm just sizing in particular column using minmax.
So the first column is 100 pixels, then one fr, one fr,
minmax 40 characters to 65 characters and one fr.
Characters is one of these things
that, you know, we could easily say,
oh you're never supposed to
size anything in character units, that's wrong,
you must use M's or you must use REM's, REM's are the best.
I think those ideas of what's best,
we need to set all of those aside,
because everything is different now.
And I'm intrigued by the idea of using characters
by saying I want this to be
in between 40 characters and 65 characters wide.
It's not actually going to look at the characters on the page,
it's going to measure the width of the zero character,
for the font that is specified on the column,
maybe not on the content in the column.
But on the column itself, the Grid container.
And it's going to measure that out.
What's going to happen is those fr columns are empty,
and they're going to collapse when we start to squish the page.
The fr columns are going to collapse down to zero,
while the minmax column stays at 65 characters
and then it's going to start to collapse.
Which I find very intriguing,
it gives us a kind of two-stage squishiness.
Where the empty columns take away the empty space,
the extra space disappears for the empty columns first,
and then the content column starts to get smaller and
smaller in order to fit into the available space.
It really changes how we think about
making a flexible webpage.
Minmax, it really changes what pixel perfect means.
Using fr units, using min content max content,
using the minmax syntax.
These ways of measuring our columns
or measuring our rows,
really takes us even further away from
this idea that we're going after some sort of
pixel perfect design.
That the way to properly build a website is to
measure a PDF and see that this is supposed to be 50 pixels,
and this is supposed to be 75 pixels
and then somehow we like replicate that on the web.
That's really not what we want to be designing,
we want to be thinking about a flexibility model,
we want to be thinking about what happens
when parts of our content
or parts of our interface are missing
or they're longer than we expected,
or they're shorter than we expected,
and that somehow we need to make a
kind of a model, it's not 3D
but almost like making a 3D model,
it's making a 2D object that's going to
morph depending on the conditions that it's in.
We want to design flexibility models for our sites,
for our pages, for our content.
And get away from this pixel perfect idea,
get totally away from this idea
that it's going to look the same
in all sorts of different situations.
What is the content, what is the interface,
what is the use-case, why did users come to the page,
and how can we best create a completely flexible layout
in both the horizontal and vertical direction
that will respond to the view port that it's in
and present everything in the best light possible.
That's what CSS Grid gives us,
that's what the future of layout is about.