- There's some amazingly
powerful things in CSS Grid that let us accomplish
layouts that we've been doing for quite a while but accomplish
them in much less code, much less effort. So let's take a look at a couple things. One thing about CSS Grid is
that there's this concept of explicit and implicit. As you learn Grid, you'll
hear those words a lot. You can explicitly define the
size and the number of rows and columns or you can do
nothing about the number of columns or the number of
rows and you can let the browser define how many rows and
columns are gonna be ... Or how big the row is gonna be or how big the column's gonna be. You can also place things
explicitly into particular cells or into particular areas. Or you can say nothing and
the browser will decide where to put it. It will implicitly place
things onto the grid according to the rules of the
Grid autoplacement algorithm, which is a whole thing that
you'll learn all about. It's one of our new best friends. It's nice. If you don't do anything. Instead of stacking all the
content up into a giant pile that's useless, Grid starts
to just automatically place things one in each
cell all the way along. And sometimes that's all you want. So let's take a look at this example. Here's a classic layout, the
kind of layout that we've done a lot since responsive
web design became a thing where we have a bunch of
photographs that are just simply put on the page. They are laid out into columns
and there's a certain number of them depending on how
much space is available. If you were doing this with
floats, it wouldn't be that hard to do because all of the images
are exactly the same size as each other. They all have the same aspect ratio. If they didn't, if they were
different lengths and heights in different sizes, then we'd
start to have a float drop problem which then requires
clearing, which then requires a bunch of extra wrappers. That becomes very tricky
with using floats. CSS Grid doesn't have
any of those problems. But here's a layout that because
of the size and the shape of the photos wouldn't be
too hard to do with floats but it's even easier with Grid. Because with floats you would
have to say, hey from this width to this width, using a media query, I'd like you to have this many columns. And now once you reach
this width, I'd like you to make more columns. And now that we have even more space, I want you to make more columns. You would write a whole bunch
of media queries for each of the changes in the number of columns. With CSS Grid you don't
have to do any of that. Let's look at the HTML. You can see here that I've got
a main and a list of images, just a bunch of images in a row. So, we're gonna apply CSS
Grid to our main element. We're gonna use the main
element as the Grid container and then each of those
images becomes a Grid item. Grid applies to a container
and the direct children of that container. Each of the direct
children becomes an item and gets placed on the grid. Anything that's a grandchild
or a great grandchild, anything that's further up in the dom outside of the Grid container,
cannot actually be placed on that particular grid. In this case though, we've got a main. That's our Grid container. We have a bunch of images. Those are items. We're gonna place our items
on the grid that we define. Here is all of the CSS for this example. All of it, 16 lines of CSS. The first couple lines are
just reset the box-sizing border-box and the margin
of zero for the body. This is just typical reset things. We put a little bit of a
background colour on the body and then we start applying
some CSS to the main and the image. You can see here, the same CSS is listed. We've got display block on the image which keeps it from being an inline. By default, images are inline which means they have a little bit
of line height applied to the bottom of them. We don't want that so we
switch them to display block which makes them act like blocks, gets rid of that extra
space that we don't want. I also put a width of 100% on the images. That way, as the space that they're in, they're in a Grid cell,
each one is in a Grid cell, as that Grid cell gets bigger and smaller, the image itself will grow
and shrink inside that space. I put a little bit of a
box shadow on the image. And then on the main, we've
got our code for the layout. Two lines of code. So on the main element I've
said display grid and then I say grid template columns and
this complicated syntax, and I'm gonna explain, that alone handles the
entire layout for this. It handles changing the number of columns. It handles how big things are. We don't need any media
queries whatsoever. That's all of the CSS. So let's look more closely at this. Display grid activates the
grid itself and of course in browsers that don't
understand display grid, that's not gonna do anything. Also those browsers won't
understand Grid template columns. So we'll just get probably
just some sort of a list, like just a solid list of images
and we'll wanna figure out something else for those browsers. But for the browsers that
understand Grid, display grid will turn on the grid. Grid template columns defines the grid. So in this case, we've said
nothing at all about rows. We're not defining the rows
so the browser is gonna implicitly define the rows. It will make as many rows as it needs. It will make each row be auto
height, which in this case means the row is gonna be
the height of the images that are in that row. Grid template columns is
us coming along and saying, here, I'm gonna tell you what
it is that I want you to do with the width of the columns. Repeat auto-fit, minmax, 200 to 1fr, that's our code that we've written. Repeat means, here I have
some stuff I'm gonna tell you. I want you to repeat this pattern over and over again. Auto-fit means we could put
a number in there like four, repeat four means make four
columns or really it means take this pattern that
I'm defining and repeat it four times. It might be a single column
pattern so you end up with four columns. It could be something like
a double column pattern and you end up with eight columns. Repeat, you can put a number there. So repeat four, blah,
blah, blah would mean take this pattern and
repeat it four times. In this case, we're saying
repeat auto-fit which means we're about to tell you something
and we want you, browser, to repeat this pattern
as many times as will fit into the space that's available. There's also an option of auto-fill. I'm not gonna explain the
difference right here. For this particular use
case, auto-fit and auto-fill will do exactly the same thing. You can look that up yourself. Rachel Andrew has a really
great video where she describes in detail the differences
between auto-fit and auto-fill. But in this case, both of
them will do the same thing. And then the pattern that
I have, the definition of the column itself,
is minmax 200 to 1fr. And what that's gonna do is
say, browser, I want you to make a column that's a minimum
of 200 pixels and a maximum of one fr, which that's what
is making a flexible column, a column that's growing and shrinking. So at the very minimum, the
column will be 200 pixels and then it grows and the moment
that there's enough space, maybe there's 600 pixels total ... You've got 400 total,
you've got 200 and 200, that's gonna be 400 and then
it grows and grows and grows and each of those two columns
grow and grow and grow and the moment that the total
reaches 600 and the browser is able to have three 200
pixel columns, it will pop to having three columns and
they'll each be 200 pixels wide. But before the browser gets to
that space, like when you're at 580, there's not enough space for three 200 pixel wide
columns and the columns are not allowed to be any smaller
than 200 pixels wide, so they're each one fr which means we've got however many columns
and we want them to each be one fraction of the space. You get one fraction of the space. You get one fraction of the space. You get one fraction. So when there's two, there
are gonna be two columns that are the same size as each other. And then when there's three,
there'll be three columns that are the same size as each other. And so on. There's other ways to write this. We could do minmax, a couple other numbers to do a very similar pattern
but in this case I did repeat autofit minmax 200 to 1fr
and that gets us this layout. The whole thing squishy,
two lines of layout code, 16 lines total, so much easier. No media queries. This is why people are gonna fall in love with Grid very quickly.
