Only direct children of the grid container will align with the grid.

Solutions:

display: contents (on parent... it will act as if it got replaced by its child items.)

subgrids (not yet supported)

nesting grid (but that grid is then independent of parent grid)

Grid is mostly defined on the parent element. In flexbox, most of the layout (beyond the very basics) happen on the children.

Grid is better at overlapping.

Flexbox can push things away. It’s a rather unique feature of flexbox that you can, for example, put margin-right: auto; on an element and, if there is room, that element will push everything else as far away as it can go can.