Knowing why, and how implicit grid tracks are created,

is important when working with grid layout.

As I mentioned in the previous video,

you are not always going to place every item manually.

And depending on the site you're building,

you might not always know exactly how many items will be in your grid container.

So grid layout generates implicit grid tracks

to position any items outside of the explicit grid.

But what if you need to size or position implicit tracks a certain way?

That could get tricky, because there could be any number of implicit tracks.

In our layout, there are just 2 explicit row tracks that declared,

100 pixels and 200 pixels.

And the grid container has 10 grid items.

The extra four items here are placed into implicit row tracks,

and they're only as tall as the content inside them.

But I want all the extra rows to be a specific size, let's say 250 pixels tall.

Well, I wanna avoid having to specify 250 pixels for

each extra track here in grid-template-rows.

Even with repeat notation, because the number could keep changing, right?

Well, CSS Grid provides a simple and

automated way to control the size and position of implicit tracks.

That way I can make any number of implicit tracks 250 pixels tall

from a single property and value.

The grid-auto-rows property controls the size of implicit row tracks and

grid-auto-columns controls implicit column tracks.

In the grid rule, let's add grid-auto-rows and set it to 250 pixels.

So now, the implicit row tracks take on the 250 pixel height.

In fact,

any implicit row track that gets created from now on will be 250 pixels tall.

So what do you think will happen if we delete

the grid-template-rows declaration from the grid rule?

Well, now the only explicit tracks in our grid are the three column tracks.

So the grid creates implicit row tracks to hold the items.

All grid rows are now 250 pixels tall because they're being sized

by grid-auto-rows.

To create implicit rows that are a minimum size but

then grow to fit more content, you can use the handy minmax function.

For instance, I'll set grid-auto-rows to minmax 150 pixels and

auto, And the rows will be no shorter

than 150 pixels and they can grow to accommodate more content, if necessary.

So we've seen how the grid creates rows to accommodate the extra grid items.

But the grid can also place extra items into implicit columns.

This is done using the grid auto flow property.

To demonstrate, I'll bring back the two row tracks with grid-template-rows and

set each to 100 pixels.

Once again, the first and second rows are part of the explicit grid.

Wile the third and fourth rows are in the implicit grid.

Well, with grid-auto-flow we can specify whether to place

extra items inside implicit rows or columns.

In other words, instead of auto placing these items inside rows,

we can position them alongside our columns.

Back in the grid rule let's add the grid-auto-flow property.

And the default value for grid-auto-flow is row,

that's why we get extra rows by default.

To switch them to columns, set the value to column.

And this positions the extra items inside implicit columns instead of rows.

So notice how the browser shifts them inside the first two row tracks and

positions them next to the columns.

And with grid-auto-flow set to column,

the grid will keep adding new columns as necessary.

So now we can, for example,

control the size of implicit column tracks with the grid-auto-columns property.

So, let's replace grid-auto-rows with grid-auto-columns.

And set the value to 100 pixels.

Now all implicit column tracks will be 100 pixels wide.

And if you want all columns to be the same width use 1fr.

Keep in mind that when you set grid-auto-flow to column,

you're changing the natural flow of the grid items.

So notice how the number order of the grid items has changed.

Instead of placing items one through five across one row and

six through ten across the next row the number order now flows down each column.

For example, one, two, three, four, five, six, and so on.

At this point feel free to add more items to the grid container to see how grid

positions the extra items in the implicit grid.

And experiment with the different auto placement properties and values.

Be sure to check the resources in the teacher's notes to learn more

about auto placement in CSS Grid Layout.

I'll see you in the next stage where you'll learn alternate methods for

positioning items on the grid, for

example, by line numbers and name grid areas.

And you'll work with the new CSS Grid Inspector,

a feature built into the Firefox Developer Tools, that helps you

visualize your grid as well as inspect and debug grid layouts in the browser.