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
From the course: CSS Essential Training
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.…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
(Locked)
Introduction to CSS Grid2m 49s
-
(Locked)
The explicit grid3m 35s
-
(Locked)
The implicit grid2m 16s
-
(Locked)
The gap property54s
-
(Locked)
Positioning with grid lines3m 31s
-
(Locked)
Project: Grid layout4m 36s
-
(Locked)
Project: Grid line positioning7m 25s
-
(Locked)
Project: Grid and dev tools2m 44s
-
(Locked)
-
-
-
-