Using Position Sticky With CSS Grid

Say you’ve got a two-column CSS grid and you want one of those columns to behave like position: sticky;. There is nothing stopping you from doing that. But the default height for those two columns is going to be …

Say you’ve got a two-column CSS grid and you want one of those columns to behave like position: sticky;. There is nothing stopping you from doing that. But the default height for those two columns is going to be “as tall as the tallest content in either column” because the default behavior for grid columns is align-items: stretch;. So, even if you have really “short” content in the column you want to behave as sticky, it won’t appear to move because really it’s already as tall as the other column.

Ahmad Shadeed makes the point that if you want that to work, you’ll probably need to align-items: start; the one you want to behave as sticky.

I would add that if you want position: sticky; behavior for elements inside either of the columns, then you’ll actually want to leave the default stretch behavior alone. Here’s an example of what I mean there as a fork:


Print Share Comment Cite Upload Translate
APA
Chris Coyier | Sciencx (2024-03-29T13:22:20+00:00) » Using Position Sticky With CSS Grid. Retrieved from https://www.scien.cx/2021/12/10/using-position-sticky-with-css-grid-2/.
MLA
" » Using Position Sticky With CSS Grid." Chris Coyier | Sciencx - Friday December 10, 2021, https://www.scien.cx/2021/12/10/using-position-sticky-with-css-grid-2/
HARVARD
Chris Coyier | Sciencx Friday December 10, 2021 » Using Position Sticky With CSS Grid., viewed 2024-03-29T13:22:20+00:00,<https://www.scien.cx/2021/12/10/using-position-sticky-with-css-grid-2/>
VANCOUVER
Chris Coyier | Sciencx - » Using Position Sticky With CSS Grid. [Internet]. [Accessed 2024-03-29T13:22:20+00:00]. Available from: https://www.scien.cx/2021/12/10/using-position-sticky-with-css-grid-2/
CHICAGO
" » Using Position Sticky With CSS Grid." Chris Coyier | Sciencx - Accessed 2024-03-29T13:22:20+00:00. https://www.scien.cx/2021/12/10/using-position-sticky-with-css-grid-2/
IEEE
" » Using Position Sticky With CSS Grid." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/12/10/using-position-sticky-with-css-grid-2/. [Accessed: 2024-03-29T13:22:20+00:00]
rf:citation
» Using Position Sticky With CSS Grid | Chris Coyier | Sciencx | https://www.scien.cx/2021/12/10/using-position-sticky-with-css-grid-2/ | 2024-03-29T13:22:20+00:00
https://github.com/addpipe/simple-recorderjs-demo