How can I make one column sticky and one column scrollable in the About Us section of my Webflow Grid?

To create a layout in Webflow where one column stays sticky (e.g., a profile or image) and the other scrolls (e.g., text content), you’ll need to properly use sticky positioning within your Grid structure.

1. Set Up Your Grid

• Add a Section and place a Grid inside it.
• Create a 2-column layout in the Grid.
• Place the sticky content (e.g., image, summary) in the left column.
• Place the scrollable content (e.g., paragraphs, history) in the right column.

2. Make the Sticky Column Work

• Select the element in the left column (e.g., a Div block or image).
• Go to the Style panel and set:
• Position: Sticky
• Top: e.g., 60px (adjust based on your navbar height)
• Ensure the element's parent container (the grid or section) has enough height to allow stickiness to take effect.

3. Ensure Proper Layout Behavior

• The sticky element's container (column) must not have overflow: hidden.
• The sticky behavior will fail if its nearest scrollable ancestor doesn’t have sufficient height. So:
• Don’t set fixed heights unless necessary.
• Let the section naturally expand with the longer right-column content.

4. Apply Scrollable Content in the Right Column

• Just place your content in the right column—it scrolls naturally as the user scrolls down the page.
• No special settings are needed here unless you want custom scroll behavior, in which case you can:
• Wrap content in a Div and apply overflow: auto and a fixed height, but this is optional and situational.

Summary

Set Position: Sticky with a Top offset on the column you want to lock during scroll, and let the other column grow naturally with scrollable content. Make sure no parent has overflow: hidden, and the content height allows for stickiness to engage.