sticky position on css grid items

by

the problem you are facing here is, that your section block consumes the full height. so it won’t stick, since it is too large to do so. you would need to put a child element inside your section and give that your sticky attributes, to make it work. based on your example, i simply wrapped your ‘hi’ inside a div.

main {
  display: grid;
  grid-template-columns: 20% 55% 25%;
  grid-template-rows: 55px 1fr;
}

nav {
  background: blue;
  grid-row: 1;
  grid-column: 1 / 4;
}

section {
  background: grey;
  grid-column: 1 / 2;
  grid-row: 2;
}

section div {
  position: sticky;
  top: 0;
}

article {
  background: yellow;
  grid-column: 2 / 4;
}

article p {
  padding-bottom: 1500px;
}
<main>
  <nav></nav>
  <section>
    <div>
      <p>one</p>
    </div>
  </section>
  <article>
    <p>two</p>
  </article>
</main>

More Related Contents:

  1. How to center a “position: absolute” element
  2. Centering in CSS Grid
  3. ‘transform3d’ not working with position: fixed children
  4. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  5. Last margin / padding collapsing in flexbox / grid layout
  6. CSS Grid Layout not working in IE11 even with prefixes
  7. How does the “position: sticky;” property work?
  8. Equal width flex items even after they wrap
  9. How to center elements on the last row in CSS Grid?
  10. CSS grid square layout [duplicate]
  11. How to target a specific column or row in CSS Grid Layout?
  12. Why do absolute elements stack up on each other instead of stacking one after the other?
  13. Absolute position is not working
  14. Center aligning a fixed position div
  15. CSS grid – maximum number of columns without media queries
  16. Why is an element with position: fixed moving with a non-positioned sibling?
  17. All widths set to width of widest element
  18. Make flex items overlap
  19. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  20. Why isn’t my margin working with position: fixed?
  21. grid-auto-flow in snake lines?
  22. Equal width columns in CSS Grid
  23. Items that span all columns/rows using CSS grid layout
  24. How can I target a specific column or row in a CSS grid layout?
  25. body { overflow-x: hidden; } breaks position: sticky
  26. Why does CSS Grid layout add extra gaps between cells?
  27. How do browsers calculate width when child depends on parent, and parent’s depends on child’s
  28. What are the default values for justify-content & align content?
  29. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  30. How to calc() the number of rows in a grid template?

Leave a Comment