CSS - sticky grid header

Question

I'm trying to create a sticky header from a group of cells in a grid.

This is the code:

 .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 50px; height: 150px; overflow: scroll; position: relative; }.cell { border: 1px solid black; }.header { display: contents; position: sticky; top: 0; }.header >.cell { background-color: red; }

 <div class="grid"> <div class="header"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>

What am I doing wrong here? How can I make the red cells "stick"? Is it the right approach for such a problem or should I separate the header to be a different component? Thanks

Answer 1

Remove the header div and give the divs that were previously inside it the appropriate position.

display:contents merely makes the container div act as though it were not there so the wrapper is unnecessary.

 .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 50px; height: 100vh; overflow: scroll; position: relative; }.cell { border: 1px solid black; }.header { position: sticky; top: 0; background-color: red; }

 <div class="grid"> <div class="cell header"></div> <div class="cell header"></div> <div class="cell header"></div> <div class="cell header"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>

Answer 2

Actually, put sticky to the cells, not the header

 .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 50px; height: 150px; overflow: scroll; position: relative; }.cell { border: 1px solid black; }.header { display: contents; }.header >.cell { background-color: red; position: sticky; top: 0; }

 <div class="grid"> <div class="header"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>