CODEWITHSUNDEEP
htmlcsspositioncss-gridsticky
Saar Kuriel
Saar Kuriel

Reputation: 3

CSS - sticky grid header

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

Upvotes: 0

Views: 260

Answers (2)

Paulie_D
Paulie_D

Reputation: 114991

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>

Upvotes: 2

Hao Wu
Hao Wu

Reputation: 20669

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>

Upvotes: 1

Related Questions