Position Sticky With CSS Grid

Have you ever tried using position: sticky with a child of a grid layout?

The default behavior of a grid item is to stretch. Therefore, the aside element in the following example is equal to the main element height.

aside

main

To make it work as expected, you need to reset the align-self property.

aside {
  align-self: start;
  position: sticky;
}

aside

main