[Question] Make grid col sticky

[MontoyaAndres]

Hi!

I have a little question, how can I make the col of yellow color sticky? I don't know why this is not working...

Here's the html:

<div className="w-screen h-screen bg-blue-500"></div>
    <div className="grid grid-cols-3 pt-4">
      {/* How can I make this col sticky? */}
      <div className="h-32 bg-yellow-500 sticky top-0"></div>

      <div className="grid grid-cols-3 gap-4 mx-auto col-span-2 w-full px-4">
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
      </div>
    </div>

[zaydek]

Oh, I think I’ve run into something similar. From my experience, sticky doesn’t like to be heavily nested. I’m sure that’s not 100% right, but that’s the guideline I follow.

What worked for me (in general) was moving the sticky element column out of the grid element. Does that work for what you’re building?

If you can attach a screenshot it would help! 👍

[MontoyaAndres]

I've tried this but it didn't work.

<div className="w-screen h-screen bg-blue-500"></div>
    <div className="flex pt-4">
      {/* How can I make this col sticky? */}
      <div className="w-1/4 h-32 bg-yellow-500 sticky top-0"></div>

      <div className="w-3/4 grid grid-cols-3 gap-4">
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
        <div className="h-24 bg-red-500"></div>
      </div>
    </div>

Maybe you can give me a little example? I just want to have the col of color yellow sticky :).

[zaydek]

I loaded up your original snippet here: https://codepen.io/zaydek/pen/bGdYKXL.

I assume you’re trying to make the yellow column sticky across all sections, not just the grid one, right? As is, the yellow column is sticky, you just have to scroll to that section to see it.

[zaydek]

You could also make it fixed across all sections: https://codepen.io/zaydek/pen/rNVYKXg.

Can you draw an example or point to an existing website that does what you’re trying to achieve?

[MontoyaAndres]

Wait, the original example that you uploaded to codepen, works... I mean, that same effect is what I want but it does not work for me. I'm using the tailwind version 1.2.0 configured with Next.js... Maybe I have something wrong?

I have it configured with postcss like this:

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")]
};

[zaydek]

I’m not sure. What I sometimes do is inspect my classes from Google Chrome’s developer tools and see if some classes aren’t being applied (because they simply don’t show up/exist).

Are you doing something besides tailwind build ...? I only use PostCSS for PurgeCSS, but that’s a production thing, not a development thing.

[MontoyaAndres]

I could fix it, all this time I had overflow: hidden in the project... 😅