Denys Inhul

scrollbar-gutter

date: May 16 2026

centering a div has been a classic meme in the industry for a long time. it’s funny and not hard

layout shifts due to a scroll bar though … that shit is not funny. the amount of time I spent in my life working around that is too much.

it starts simple - you do not care. Then you grow, you add more content, layout complexity, dynamic content, infinite scrolls, and now you start to notice, that jarring moment where everything shifts for seemingly no reason. you lose your precious 17px and the image grid layout you hardcoded now becomes a 2x3 grid instead of 3x2. it’s like pasting an image into word.

so now someone needs to fix that, and often that someone was me. everytime you do it, it feels like your first time, either I don’t learn or I swear that shit changes from year to year, everytime I look like this:

there is dozen ways you try. it works on some pages but not others, there is a 1px dead zone where the layout shifts and then your fix kicks in later. it breaks between older versions of chrome. you test edge and your page does not render at all, you skip that. then you test safari, ohhhh shit. you cry. you try again. you think it works, you merge and forget it like a nightmare.

I just had to deal with this a second ago, and so naturally I asked claude, and I’ve compressed all my experience into a sentence and told it how to do it.

It refused. citing a now properly supported scrollbar-gutter CSS property.

Baseline 2024. Newly available

The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn’t needed.