Css Grid item stick to top on scroll

Question

I have a layout with 3 columns when large then for mobile i resize it to each row the full width of the grid on mobile. When large I need column 1 and 3 to be sticky to the top when column 2 is scrolling. I made an example here on codesandbox.

Here is also the css from the sandbox:

.App {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "col1 col2 col3";
}

.column1 {
  background-color: aquamarine;
  grid-area: col1;
}

.column2 {
  background-color: rebeccapurple;
  grid-area: col2;
}

.column3 {
  background-color: orange;
  grid-area: col3;
}

@media only screen and (max-width: 800px) {
  .App {
    color: red;
    grid-template-areas:
      "col1 col1 col1"
      "col3 col3 col3"
      "col2 col2 col2";
  }
}

I've tried making position sticky on .column1 but it still didnt stick to the top. Think of .column1 and .column3 as a sidebar filter. Also when on mobile dont make the columns sticky to the top

you are not defining any sticky behavior in your code – Temani Afif Feb 04 '21 at 20:08 — Temani Afif, Feb 04 '21 at 20:08

G-Cyrillus · Accepted Answer · 2021-02-04T20:37:32.643

You need to set an height on the grid itself and overflow on the column supposed to scroll ( if i understood your trouble)

body {
  margin: 0;
}
.App {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "col1 col2 col3";
  height: 100vh;
}

.column1 {
  background-color: aquamarine;
  grid-area: col1;
}

.column2 {
  background-color: rebeccapurple;
  grid-area: col2;
  overflow: auto;
}

.column3 {
  background-color: orange;
  grid-area: col3;
}

@media only screen and (max-width: 800px) {
  .App {
    height:auto;
    color: red;
    grid-template-areas:
      "col1 col1 col1"
      "col3 col3 col3"
      "col2 col2 col2";
  }
}

<div class="App">
      <div class="column1">Column 1</div>
      <div class="column2">
        <h1>Column 2</h1>Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Ut ex purus, lobortis eget dapibus sed, elementum nec tortor.
        Fusce vehicula lobortis maximus. Phasellus eu ante ut massa molestie
        laoreet non eget ante. Duis diam nisi, porttitor eu libero eget, commodo
        tincidunt velit. Quisque a urna a quam eleifend faucibus. Integer id est
        et sem placerat scelerisque. Ut tempor condimentum euismod. Phasellus a
        faucibus sem. Vestibulum id interdum ligula. Proin vel tellus eget
        libero convallis finibus sit amet vel tellus. Suspendisse potenti.
        Mauris at eros nec nulla luctus interdum. Sed non cursus diam, vitae
        commodo quam. Nam viverra quam non imperdiet sagittis. Vestibulum quis
        justo ut risus varius hendrerit ac et ex. Vestibulum volutpat a felis ac
        porta. Sed faucibus vitae sapien a tincidunt. Quisque ut magna in ligula
        scelerisque tincidunt et ac est. Proin vitae interdum felis. Ut sem
        enim, dapibus cursus vulputate commodo, venenatis ut turpis. In
        dignissim sapien sit amet lorem aliquam posuere. Suspendisse vel enim
        commodo, posuere orci quis, eleifend mi. Quisque in massa vitae metus
        rhoncus sollicitudin. Vestibulum auctor pharetra orci non eleifend.
        Donec ornare mauris mi, non sagittis odio posuere ut. Nunc quis ultrices
        ex. Vestibulum massa dui, congue eu vestibulum id, cursus sit amet
        turpis. Donec posuere, mauris id finibus cursus, lacus tortor fermentum
        odio, vel tempor leo velit ut velit. Mauris rhoncus tempor nunc, a
        aliquam purus tempus in. Cras imperdiet laoreet nunc, et efficitur odio
        bibendum sit amet. Cras mattis sem non ex gravida, id suscipit nisl
        lobortis. Nunc efficitur vehicula nisi ac gravida. Ut auctor dignissim
        quam, at pulvinar velit vestibulum ut. Fusce nisi augue, porttitor at
        commodo sit amet, porttitor a quam. Vestibulum sit amet lobortis ipsum,
        a sodales tellus. Orci varius natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Donec efficitur consequat risus, vel
        dignissim orci vehicula auctor. Mauris congue justo non augue
        scelerisque, et imperdiet elit faucibus. Nam velit sem, luctus sit amet
        nunc vel, feugiat eleifend justo. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Pellentesque sodales est eget dui accumsan
        laoreet. Aenean tincidunt tempor volutpat. Pellentesque habitant morbi
        tristique senectus et netus et malesuada fames ac turpis egestas. Aenean
        nec viverra leo. Cras ut sapien scelerisque, fermentum ex nec, dapibus
        velit. Vestibulum rhoncus et est nec accumsan. Pellentesque habitant
        morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Curabitur a eros justo. Vivamus efficitur eros vel sollicitudin blandit.
        Vivamus non elementum purus, vitae eleifend eros. Ut sed sodales leo, ac
        pharetra quam. Nunc non libero orci. Duis dapibus lacus eu tortor
        feugiat finibus. Nulla laoreet aliquet commodo. Nam mauris nunc, varius
        sit amet faucibus vitae, facilisis porta nulla. Donec id eleifend metus,
        a laoreet ex. Praesent ac nisi pulvinar, ullamcorper ligula ac,
        imperdiet ligula. Nullam diam justo, vulputate vitae ligula et, placerat
        condimentum lorem. Cras bibendum lectus a eleifend feugiat. Proin
        bibendum eget massa at pulvinar. Ut vel aliquam urna. Lorem ipsum dolor
        sit amet, consectetur adipiscing elit. Ut ex purus, lobortis eget
        dapibus sed, elementum nec tortor. Fusce vehicula lobortis maximus.
        Phasellus eu ante ut massa molestie laoreet non eget ante. Duis diam
        nisi, porttitor eu libero eget, commodo tincidunt velit. Quisque a urna
        a quam eleifend faucibus. Integer id est et sem placerat scelerisque. Ut
        tempor condimentum euismod. Phasellus a faucibus sem. Vestibulum id
        interdum ligula. Proin vel tellus eget libero convallis finibus sit amet
        vel tellus. Suspendisse potenti. Mauris at eros nec nulla luctus
        interdum. Sed non cursus diam, vitae commodo quam. Nam viverra quam non
        imperdiet sagittis. Vestibulum quis justo ut risus varius hendrerit ac
        et ex. Vestibulum volutpat a felis ac porta. Sed faucibus vitae sapien a
        tincidunt. Quisque ut magna in ligula scelerisque tincidunt et ac est.
        Proin vitae interdum felis. Ut sem enim, dapibus cursus vulputate
        commodo, venenatis ut turpis. In dignissim sapien sit amet lorem aliquam
        posuere. Suspendisse vel enim commodo, posuere orci quis, eleifend mi.
        Quisque in massa vitae metus rhoncus sollicitudin. Vestibulum auctor
        pharetra orci non eleifend. Donec ornare mauris mi, non sagittis odio
        posuere ut. Nunc quis ultrices ex. Vestibulum massa dui, congue eu
        vestibulum id, cursus sit amet turpis. Donec posuere, mauris id finibus
        cursus, lacus tortor fermentum odio, vel tempor leo velit ut velit.
        Mauris rhoncus tempor nunc, a aliquam purus tempus in. Cras imperdiet
        laoreet nunc, et efficitur odio bibendum sit amet. Cras mattis sem non
        ex gravida, id suscipit nisl lobortis. Nunc efficitur vehicula nisi ac
        gravida. Ut auctor dignissim quam, at pulvinar velit vestibulum ut.
        Fusce nisi augue, porttitor at commodo sit amet, porttitor a quam.
        Vestibulum sit amet lobortis ipsum, a sodales tellus. Orci varius
        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec efficitur consequat risus, vel dignissim orci vehicula
        auctor. Mauris congue justo non augue scelerisque, et imperdiet elit
        faucibus. Nam velit sem, luctus sit amet nunc vel, feugiat eleifend
        justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Pellentesque sodales est eget dui accumsan laoreet. Aenean tincidunt
        tempor volutpat. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Aenean nec viverra leo. Cras ut
        sapien scelerisque, fermentum ex nec, dapibus velit. Vestibulum rhoncus
        et est nec accumsan. Pellentesque habitant morbi tristique senectus et
        netus et malesuada fames ac turpis egestas. Curabitur a eros justo.
        Vivamus efficitur eros vel sollicitudin blandit. Vivamus non elementum
        purus, vitae eleifend eros. Ut sed sodales leo, ac pharetra quam. Nunc
        non libero orci. Duis dapibus lacus eu tortor feugiat finibus. Nulla
        laoreet aliquet commodo. Nam mauris nunc, varius sit amet faucibus
        vitae, facilisis porta nulla. Donec id eleifend metus, a laoreet ex.
        Praesent ac nisi pulvinar, ullamcorper ligula ac, imperdiet ligula.
        Nullam diam justo, vulputate vitae ligula et, placerat condimentum
        lorem. Cras bibendum lectus a eleifend feugiat. Proin bibendum eget
        massa at pulvinar. Ut vel aliquam urna.
      </div>
      <div class="column3">Column 3</div>
    </div>

For a sticky layout and the scroll on the right see https://codesandbox.io/s/sleepy-brook-3ut30 sticky column's background is drawn from the parent container , since sticky will unstick once reaching the end of the parent and scrolling along with it.

I just needed .column1 and .column3 to be sticky to the top...when I scroll the string column 1 and column3 should still show — ousmane784, Feb 04 '21 at 20:17
okay, added a second snippet but will update only for a scrolling desktop — G-Cyrillus, Feb 04 '21 at 20:19
Yeah just like that but I dont need them to be sticky inside the media query — ousmane784, Feb 04 '21 at 20:20
When in the media query column 1 and 3 should scroll with the page — ousmane784, Feb 04 '21 at 20:20
Is the same thing possible to have the scroll bar on the right of the page like most web pages ? — ousmane784, Feb 04 '21 at 20:29
Is there something online that has the same situation as me and uses the sticky position? All the ones I find say to add an extra div, etc... or show another example? — ousmane784, Feb 04 '21 at 20:31
see https://codesandbox.io/s/sleepy-brook-3ut30 the thing is you have to draw the background from the parent container to fake a full column . (search for faux-column layout to understand the method) — G-Cyrillus, Feb 04 '21 at 20:35
Alright cool, for performance purposes is it better to use css for this type of stuff or javascript? — ousmane784, Feb 04 '21 at 20:39
no idea, but if your browser support position:sticky, why would you add some js doing the same ? built-in implementation should be better IMHO , it's there already then :) — G-Cyrillus, Feb 04 '21 at 20:41
Also the column3 div still sticks to the top in the example on mobile — ousmane784, Feb 04 '21 at 20:43
reset position inside the mediaquerie :) https://codesandbox.io/s/ancient-cdn-cpvw2 — G-Cyrillus, Feb 04 '21 at 20:45

Css Grid item stick to top on scroll

1 Answers1