If you’ve ever tried to put a sticky item in a grid layout and watched the item scroll away with the rest of the content, you might have come to the conclusion that
position: stickydoesn’t work with CSS Grid. Fear not! It is possible to get these two layout concepts working together. All you likely need is one more line of CSS.
The solution is to make it so that the item you want to stick does not stretch out vertically. You can do this by applying
align-self: start; on said element, which is the same approach I took when implementing that Smooth Scrolling Sticky ScrollSpy Navigation earlier this year 🙂
Great work man. Take love.
Leave a comment