Knowing why, and how implicit grid tracks are created, 0:00 is important when working with grid layout. 0:04 As I mentioned in the previous video, 0:06 you are not always going to place every item manually. 0:08 And depending on the site you're building, 0:11 you might not always know exactly how many items will be in your grid container. 0:13 So grid layout generates implicit grid tracks 0:17 to position any items outside of the explicit grid. 0:20 But what if you need to size or position implicit tracks a certain way? 0:24 That could get tricky, because there could be any number of implicit tracks. 0:28 In our layout, there are just 2 explicit row tracks that declared, 0:32 100 pixels and 200 pixels. 0:37 And the grid container has 10 grid items. 0:39 The extra four items here are placed into implicit row tracks, 0:43 and they're only as tall as the content inside them. 0:48 But I want all the extra rows to be a specific size, let's say 250 pixels tall. 0:51 Well, I wanna avoid having to specify 250 pixels for 0:57 each extra track here in grid-template-rows. 1:01 Even with repeat notation, because the number could keep changing, right? 1:05 Well, CSS Grid provides a simple and 1:09 automated way to control the size and position of implicit tracks. 1:12 That way I can make any number of implicit tracks 250 pixels tall 1:16 from a single property and value. 1:20 The grid-auto-rows property controls the size of implicit row tracks and 1:22 grid-auto-columns controls implicit column tracks. 1:27 In the grid rule, let's add grid-auto-rows and set it to 250 pixels. 1:31 So now, the implicit row tracks take on the 250 pixel height. 1:41 In fact, 1:46 any implicit row track that gets created from now on will be 250 pixels tall. 1:47 So what do you think will happen if we delete 1:52 the grid-template-rows declaration from the grid rule? 1:55 Well, now the only explicit tracks in our grid are the three column tracks. 1:59 So the grid creates implicit row tracks to hold the items. 2:05 All grid rows are now 250 pixels tall because they're being sized 2:09 by grid-auto-rows. 2:14 To create implicit rows that are a minimum size but 2:16 then grow to fit more content, you can use the handy minmax function. 2:19 For instance, I'll set grid-auto-rows to minmax 150 pixels and 2:23 auto, And the rows will be no shorter 2:32 than 150 pixels and they can grow to accommodate more content, if necessary. 2:37 So we've seen how the grid creates rows to accommodate the extra grid items. 2:43 But the grid can also place extra items into implicit columns. 2:47 This is done using the grid auto flow property. 2:52 To demonstrate, I'll bring back the two row tracks with grid-template-rows and 2:55 set each to 100 pixels. 3:01 Once again, the first and second rows are part of the explicit grid. 3:06 Wile the third and fourth rows are in the implicit grid. 3:11 Well, with grid-auto-flow we can specify whether to place 3:15 extra items inside implicit rows or columns. 3:20 In other words, instead of auto placing these items inside rows, 3:23 we can position them alongside our columns. 3:27 Back in the grid rule let's add the grid-auto-flow property. 3:31 And the default value for grid-auto-flow is row, 3:40 that's why we get extra rows by default. 3:43 To switch them to columns, set the value to column. 3:47 And this positions the extra items inside implicit columns instead of rows. 3:53 So notice how the browser shifts them inside the first two row tracks and 3:58 positions them next to the columns. 4:02 And with grid-auto-flow set to column, 4:04 the grid will keep adding new columns as necessary. 4:06 So now we can, for example, 4:09 control the size of implicit column tracks with the grid-auto-columns property. 4:11 So, let's replace grid-auto-rows with grid-auto-columns. 4:17 And set the value to 100 pixels. 4:25 Now all implicit column tracks will be 100 pixels wide. 4:30 And if you want all columns to be the same width use 1fr. 4:35 Keep in mind that when you set grid-auto-flow to column, 4:44 you're changing the natural flow of the grid items. 4:48 So notice how the number order of the grid items has changed. 4:51 Instead of placing items one through five across one row and 4:55 six through ten across the next row the number order now flows down each column. 4:59 For example, one, two, three, four, five, six, and so on. 5:04 At this point feel free to add more items to the grid container to see how grid 5:08 positions the extra items in the implicit grid. 5:12 And experiment with the different auto placement properties and values. 5:15 Be sure to check the resources in the teacher's notes to learn more 5:20 about auto placement in CSS Grid Layout. 5:22 I'll see you in the next stage where you'll learn alternate methods for 5:25 positioning items on the grid, for 5:29 example, by line numbers and name grid areas. 5:30 And you'll work with the new CSS Grid Inspector, 5:33 a feature built into the Firefox Developer Tools, that helps you 5:35 visualize your grid as well as inspect and debug grid layouts in the browser. 5:39