Position sticky with CSS Grid

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.

Examples and use cases

Main and Aside

Title

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!

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe corporis iure, quo asperiores sequi aspernatur odio.

Aside

Support Defensive CSS

Do you like the content? You can buy me a cup of coffee. Thank you!

About the author

Ahmad Shadeed

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.