Question 175513 in CSS Question posted in
Some basic documentation can be found here.

Is CSS sticky element in grid column working?

I have a 2 column grid, and I am trying to make the 2nd column sticky.
For some reason, it isn’t sticking. I googled the issue, and even used GPT4 and still couldn’t find the cause for the problem…

This is my react code:

 .ftBlogRow-div{
    display: grid;
    grid-template-columns: 3fr 1.8fr;
   
  }


  .adBox-sticky{
    align-self: start;
    position: sticky;
    top:0;
    width: 100px;
    height: 100px;
    background-color: #1b1b1b;
    color: red;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>


<div className="ftBlogRow-div">
      <FtBlogRowBox limit={10} /> <div className="adBox-sticky"><p>testing</p></div>
      </div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I had to remove overflow-x: hidden from my global css...


  2. 0

    That’s not how sticky will work. position: sticky; will not move an element out of the flow. means it will leave with its parent. To use sticky in a grid, you need a sticky element within a grid card element:

    .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5em;
}

.sticky {
  position: sticky;
  top: 0;
}




/* for visualization purpose only */
.grid-card {
  border: 1px dashed red;
}

.left-side {
  min-height: 500vh;
}

.sticky {
  border: 1px solid blue;
}
    <div class="grid-container">
  <div class="grid-card left-side">Long content</div>
  <div class="grid-card right-side">
    <div class="sticky">Sticky Element</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search