Kevin Powell - Community•5mo ago

Sticky div in a Grid Column

<div class="grid grid-cols-3">
  <article class="col-span-2">
  </article>
  <article class="col-span-1 relative">
    <section class="sticky">
      contents
    </section>
  </article>
</div>

<div class="grid grid-cols-3">
  <article class="col-span-2">
  </article>
  <article class="col-span-1 relative">
    <section class="sticky">
      contents
    </section>
  </article>
</div>

Above is a 3 column grid. In my last column, I have a section which I want to make it to stick relative to its parent while the user scrolls down - i.e. a box in the rightmost column sticks to the top while user scrolls down, and ends the scrolling when the grid parent ends. This is similar to Kevin's video here: https://youtu.be/fF_NVrd1s14?si=mhHzxXGjQq0k4ZdE&t=1398 However, I am unable to make it stick, im guessing due to the grid. Kevin was using flex in the video.

Kevin Powell

YouTube

CSS position deep dive

https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=positioning 👈 Looking to up your CSS game? I have a bunch of courses, including several free ones. With over 700 videos on YouTube that are almost all entirely about CSS, I’ve somehow never made one that looks at all the CSS position values! I’ve compared relative...

4 Replies

clevermissfox•5mo ago

It’s prob relative to its cell, can you put your code in a live site like codepen

Mannix•5mo ago

My guess would be that your sticky column is stretched (default grid child behavior) so you need align-self: start; on it to make the sticky work

idontdota•5mo ago

https://codepen.io/Lany-Loh/pen/GRepVeQ?editors=1100 This is an example. I want the red box to stick and glide up and down to the blue section while user scrolls up and down. Hi @hart❤🔥 @Mannix thanks for your help. I added top-0 to my sticky css and it worked. Referenced from https://css-tricks.com/using-position-sticky-with-css-grid/

kaleab•5mo ago

It is being sticky. But it is the second article that is being sticky relative to its container section. In order to make it work how you want it to work, put the sticky class on the parent section and the class relative on the body.

Gaming

Programming

Sticky div in a Grid Column