假设您有一个两列 CSS 网格,您希望其中一列的行为类似于 position: sticky;
。没有什么能阻止您这样做。但是,这两列的默认高度将是“两列中最高内容的高度”,因为网格列的默认行为是 align-items: stretch;
。因此,即使您在想要表现为粘性的列中具有非常“短”的内容,它也不会看起来移动,因为它实际上已经与另一列一样高。
Ahmad Shadeed 指出,如果您希望它正常工作,您可能需要将想要表现为粘性的列的 align-items: start;
设置为开始。
我想补充一点,如果您想要position: sticky;
行为适用于两列中任何一个的内部元素,那么您实际上需要保留默认的拉伸行为。这是一个分叉示例,说明我的意思