From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

The implicit grid

The implicit grid

- [Narrator] In the last lesson, we talked about creating explicit grids by setting the number of rows and columns within a grid container. But for content that changes frequently, like a social media feed or a comment thread, you don't always know in advance how many items will need to be displayed. When the explicit grid is filled or hasn't been defined, grid items are automatically placed into an implicit grid. Implicit grids are created dynamically only when there are extra items that need to be placed outside of the explicit grid. So, we don't define the number of items. Instead, we define the size of the items with the grid-auto-rows, and grid-auto-columns properties. Let's go back to the code pen example from the previous lesson. Here's where we left off. We had six grid items, but only defined three columns and one row in the explicit grid. Meaning items four, five, and six are placed in the implicit grid.…

Contents