Hubert Sablonnière avatar Hubert Sablonnière

Prevent layout shifts with CSS grid stacks

Screenshot of “Prevent layout shifts with CSS grid stacks”

I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links!

😎 No more layout shifts!

Compared to the absolute position solution, we improved the situation:

  • No need to add a .wrapper
  • Would work fine with more than two panels
  • No need to assume which panel needs to guide the whole component size

  1. I have a client site with a header that is hidden when the user scrolls down, but shown again when the user scrolls up, which seems pretty comon nowadays.

    This triggers some CLS, even if the hide/show is done in less than 500 ms, as “continuous interactions such as scrolls, drags, or pinch and zoom gestures are not considered ‘recent input’”. 😞