It appears that the issue you are encountering is caused by your section block taking up the full height, preventing it from sticking as intended. To resolve this, you can place a child element within your section and apply the sticky attributes to it instead. In your case, I have simply wrapped your 'hi' inside a div.
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
min-height: 1000px;
}
nav {
background: blue;
height: 100%;
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;
}
<main>
<nav></nav>
<section>
<div>
<p>one</p>
</div>
</section>
<article>
<p>two</p>
</article>
</main>
UPDATE: The issue arises due to the default value of align-items being set to stretch for elements with display: grid, causing all children to have equal heights. This can be avoided by setting align-items: start;. Below is an alternative example without the extra div.
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
min-height: 1000px;
align-items: start;
}
nav {
background: blue;
height: 100%;
grid-column: 1 / 4;
}
section {
position: sticky;
top: 0;
background: grey;
grid-column: 1 / 2;
grid-row: 2;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}
<main>
<nav></nav>
<section>
<p>one</p>
</section>
<article>
<p>two</p>
</article>
</main>