The Explicit and Implicit Grid

When you create a Grid Layout, you are defining what's called an explicit grid. 0:00 That just means it's the grid you defined with the grid-template-rows and 0:04 grid-template-columns properties. 0:08 You explicitly told the browser that this is the grid you want. 0:10 But, what happens if there are too many grid items to fit inside the grid you 0:14 defined? 0:18 For example, say you declare a grid with three column tracks and two row tracks. 0:19 The explicit grid can only fit six items. 0:24 What if later, your grid container has nine items or more, 0:28 what happens to those extra items? 0:31 This kind of situation is common when your page content is dynamically generated and 0:33 you don't know ahead of time how many grid items will appear on the page. 0:38 For instance, a listing of photo thumbnails and 0:42 descriptions that are created on a photo-sharing site could vary depending on 0:45 whose photo it's displaying and the length of the description. 0:48 So to handle this uncertainty, Grid Layout provides an implicit grid. 0:51 The implicit grid is automatically generated by the grid container 0:56 to position any extra items outside of the explicit grid. 1:00 This is an important concept to keep in mind when creating your grid because it 1:04 will help you determine the placement and size of all grid items, 1:08 even items you may not have accounted for. 1:12 And it will help you create better Grid Layouts overall. 1:15 We've already been working with implicit tracks. 1:18 Remember when we first defined column tracks at the beginning of the course? 1:21 Even though we hadn't set row tracks, as we added new grid items to the container, 1:25 the grid implicitly placed the items into rows. 1:31 Also, in the previous video, we created a flexible grid that as you resize 1:34 the viewport, adjusts from three columns to two columns to one column. 1:40 But we only set two row tracks, 1:45 the first to 100 pixels and the second to 200 pixels. 1:48 So the third row is in the implicit grid. 1:53 And as the container wraps items onto new rows, 1:57 the grid creates more implicit row tracks to position the items. 2:00 Let's explore how and why this happens. 2:05 I'm going to define just three flexible column tracks by setting 2:08 grid-template-columns to 1fr, 1fr, and 1fr. 2:13 And we'll keep the two row tracks. 2:17 So we've explicitly defined three column tracks and two row tracks. 2:19 So grid items positioned inside these tracks will be part of the explicit grid. 2:24 And any items placed outside of these defined grid tracks will be in 2:29 the implicit grid. 2:33 In the browser, we see the three flexible columns. 2:34 The first row is 100 pixels tall and the second 200 pixels. 2:37 But, what about the bottom row? 2:42 Why is it much shorter than the rows above it? 2:44 Well, you see, the explicit grid we created fits six grid items, 2:46 three items inside each of the two rows. 2:51 However, there are eight items inside the grid container. 2:54 So an implicit row track was created to accommodate the extra two items. 2:59 This extra row is in the implicit grid. 3:04 And if you add more grid items, for example, two more items, 3:07 The grid will create as many implicit row tracks as needed to fit the items. 3:15 In this case, it creates one more row. 3:20 Just imagine adding any number of extra elements to a float-based or 3:24 inline-block layout. 3:28 It would most likely break the layout. 3:30 Then you'd have to spend costly time fixing it. 3:32 So this is a prime example of just how intelligent Grid Layout is at 3:34 placing items. 3:39 It makes sure that every grid item has a well-defined grid area to lay out into. 3:41 Now, notice how the extra two rows are not as tall as the top two rows. 3:45 Well, this is because implicit tracks are auto-sized by default. 3:50 So their size is based on content. 3:55 In this case, the rows' heights are as tall as the content they hold. 3:58 And if you need to set their height, you could define a third and 4:01 fourth row track with grid-template-rows. 4:06 And the extra items will then be placed in the explicit grid. 4:09 But you might not always have control over the number of items in implicit tracks. 4:12 What if more items are added to the container and 4:17 another implicit row is created and yet another, and 4:19 you need those implicit tracks to be a certain size? 4:22 For example, your grid container might be a section of a site that users post 4:25 content to, like an image gallery or a section of articles. 4:30 Updating your grid-template-rows tracklist every time new items are added 4:33 would be counterproductive and cause bloat in your CSS. 4:38 So Grid provides smarter, more efficient ways to control the size and 4:42 placement of implicit grid tracks. 4:46 I'll teach you about them in the next video. 4:49