Have you ever tried using position: sticky with a child of a grid container? The default behavior for grid items is to stretch. As a result, the aside element in the example below is equal to the main section height.
To make it work as expected, you need to reset align-self property.
aside {
align-self: start;
position: sticky;
top: 1rem;
}
I wrote about that topic in detail on my blog, if you're interested.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe corporis iure, quo asperiores sequi aspernatur odio adipisci, eligendi, unde provident mollitia sed deleniti! Nisi, facilis hic voluptatibus excepturi autem sequi!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe corporis iure, quo asperiores sequi aspernatur odio.
Aside
Do you like the content? You can buy me a cup of coffee. Thank you!
Ahmad is a UX designer and front-end developer from Palestine. He enjoys working on challenging design and front-end development projects. He wrote a book on debugging CSS, writes extensively on CSS, Accessibility, and RTL (right to left) text styling.