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. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?