When you create a Grid Layout, you are defining what's called an explicit grid.

That just means it's the grid you defined with the grid-template-rows and

grid-template-columns properties.

You explicitly told the browser that this is the grid you want.

But, what happens if there are too many grid items to fit inside the grid you

defined?

For example, say you declare a grid with three column tracks and two row tracks.

The explicit grid can only fit six items.

What if later, your grid container has nine items or more,

what happens to those extra items?

This kind of situation is common when your page content is dynamically generated and

you don't know ahead of time how many grid items will appear on the page.

For instance, a listing of photo thumbnails and

descriptions that are created on a photo-sharing site could vary depending on

whose photo it's displaying and the length of the description.

So to handle this uncertainty, Grid Layout provides an implicit grid.

The implicit grid is automatically generated by the grid container

to position any extra items outside of the explicit grid.

This is an important concept to keep in mind when creating your grid because it

will help you determine the placement and size of all grid items,

even items you may not have accounted for.

And it will help you create better Grid Layouts overall.

We've already been working with implicit tracks.

Remember when we first defined column tracks at the beginning of the course?

Even though we hadn't set row tracks, as we added new grid items to the container,

the grid implicitly placed the items into rows.

Also, in the previous video, we created a flexible grid that as you resize

the viewport, adjusts from three columns to two columns to one column.

But we only set two row tracks,

the first to 100 pixels and the second to 200 pixels.

So the third row is in the implicit grid.

And as the container wraps items onto new rows,

the grid creates more implicit row tracks to position the items.

Let's explore how and why this happens.

I'm going to define just three flexible column tracks by setting

grid-template-columns to 1fr, 1fr, and 1fr.

And we'll keep the two row tracks.

So we've explicitly defined three column tracks and two row tracks.

So grid items positioned inside these tracks will be part of the explicit grid.

And any items placed outside of these defined grid tracks will be in

the implicit grid.

In the browser, we see the three flexible columns.

The first row is 100 pixels tall and the second 200 pixels.

But, what about the bottom row?

Why is it much shorter than the rows above it?

Well, you see, the explicit grid we created fits six grid items,

three items inside each of the two rows.

However, there are eight items inside the grid container.

So an implicit row track was created to accommodate the extra two items.

This extra row is in the implicit grid.

And if you add more grid items, for example, two more items,

The grid will create as many implicit row tracks as needed to fit the items.

In this case, it creates one more row.

Just imagine adding any number of extra elements to a float-based or

inline-block layout.

It would most likely break the layout.

Then you'd have to spend costly time fixing it.

So this is a prime example of just how intelligent Grid Layout is at

placing items.

It makes sure that every grid item has a well-defined grid area to lay out into.

Now, notice how the extra two rows are not as tall as the top two rows.

Well, this is because implicit tracks are auto-sized by default.

So their size is based on content.

In this case, the rows' heights are as tall as the content they hold.

And if you need to set their height, you could define a third and

fourth row track with grid-template-rows.

And the extra items will then be placed in the explicit grid.

But you might not always have control over the number of items in implicit tracks.

What if more items are added to the container and

another implicit row is created and yet another, and

you need those implicit tracks to be a certain size?

For example, your grid container might be a section of a site that users post

content to, like an image gallery or a section of articles.

Updating your grid-template-rows tracklist every time new items are added

would be counterproductive and cause bloat in your CSS.

So Grid provides smarter, more efficient ways to control the size and

placement of implicit grid tracks.

I'll teach you about them in the next video.