CSS Grid is a layout system that lets you arrange elements in rows and columns simultaneously. Unlike flexbox, which works in one direction at a time, grid works in 2 dimensions at once, making it suited to page-level layouts where you need precise control over both horizontal and vertical placement.
When a parent element is set to display: grid, its direct children become grid items and are placed according to the parent's grid definition. The parent controls everything: how many columns there are, how wide each column is, how much space sits between them, and how items align within their cells. A child element's own CSS can influence its placement within the grid, but the fundamental structure comes from the parent.
This is why elements inside a grid container sometimes refuse to behave the way their own CSS seems to indicate. The parent is in control of the layout, and the child's positioning is constrained by the cell it's been placed in. Loupely Lens's ancestor traversal reads the grid properties on parent containers and surfaces them as part of the diagnosis when they're the real source of a layout problem.