5 replies

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>

<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.

YouTubeKevin Powell

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...

Sticky div in a Grid Column

Similar Threads

Similar Threads

Similar Threads