Equal height children of grid items

Question

With the Grid spec, I understand how to align the children of a grid container, but I want to align elements within the children, as if they were the grid items, ra

Answer 1

Unless you can use display: subgrid or display: contents (more info below), the only way to achieve this behavior with CSS alone would be to put all children of the various grid items in a single grid container. In other words, make them all siblings.

The problem is that an element in one container has no idea what its cousin in another container is doing. They have no direct connection, which prevents them from working together. Siblings, on the other hand, have no problem working together.

Note that "flattening" HTML documents for the purposes of CSS is not recommended as it damages semantics and accessibility.

More information:

• Positioning content of grid items in primary container (subgrid feature)
• What is an alternative to css subgrid?