Html css网格项上的粘性位置

我在这里看过其他的例子，但是找不到一个能让这一切顺利进行的。我希望侧边栏（部分）在页面滚动时保持粘性。位置：如果我把它放在导航上，sticky可以工作，所以我的浏览器def支持它

main{
显示：网格；
网格模板柱：20%55%25%；
网格模板行：55px 1fr；
}
导航{
背景：蓝色；
网格行：1；
网格柱：1/4；
}
部分{
背景：灰色；
网格柱：1/2；
网格行：2；
位置：粘性；
排名：0；
左：0；
}
文章{
背景：黄色；
网格柱：2/4；
}
第p条{
垫底：1500px；
}

你好
嗨

您在这里面临的问题是，您的剖面块占用了整个高度。所以它不会粘住，因为它太大了。您需要在分区中放置一个子元素，并为其提供粘性属性，以使其工作。根据您的示例，我只是将您的“hi”包装在一个div中

main{
显示：网格；
网格模板柱：20%55%25%；
网格模板行：55px 1fr；
}
导航{
背景：蓝色；
网格行：1；
网格柱：1/4；
}
部分{
背景：灰色；
网格柱：1/2；
网格行：2；
}
分区{
位置：粘性；
排名：0；
}
文章{
背景：黄色；
网格柱：2/4；
}
第p条{
垫底：1500px；
}

一个

两个

您需要使用

align self:start

对您想要的东西进行

粘贴

main{
显示：网格；
网格模板柱：20%55%25%；
网格模板行：55px 1fr；
背景：灰色；
}
导航{
背景：蓝色；
网格行：1；
网格柱：1/4；
}
部分{
背景：灰色；
网格柱：1/2；
网格行：2；
位置：粘性；
排名：0；
左：0；
对齐自我：开始；
}
文章{
背景：黄色；
网格柱：2/4；
}
第p条{
垫底：1500px；
}

你好
嗨

你的侧边栏和导航栏必须固定，而正文内容必须是正常的滚动div，至少我认为你应该这样做才能实现你想要的布局，正是我的情况从

main

中删除

背景：灰色

，看看你的解决方案的副作用：不再有等高列，这是CSS网格的一个非常重要的优点。这是一个替代解决方案，但你是对的。