Chapter 2: Intro to Grid
With an understanding of how Grid works, let's explore its structure and syntax.
Fork the opening CodePen to your account:
Beginning CodePenLessons in this chapter
- Relationship between parents (grid container) and children (grid items, or the figure element in our example)
- Parent properties: display, grid-template-columns, grid-template-rows, gap, align-items
- Child properties: grid-column, grid-row
- It’s possible to reorder grid cells or cause grid cells to span over rows or columns with grid-column and/or grid-row
- Extrinsic grid is the declared grid in the CSS
- Intrinsic grid describes the behavior where elements not specifically called out in the CSS move into place on their own.