Hubert Sablonnière

Prevent layout shifts with CSS grid stacks

https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/

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

• older link:
  Hydration is Pure Overhead
• newer link:
  Some personas - Orange digital accessibility guidelines

---

Related contents with similar topics

1. 

   Johannes Odland

   Cropping Images with CSS While Keeping a Focal Point in the Center

   • Nicolas Hoizey
   • 22 June 2023
   • image, WebPerf, CSS, Container Queries
   • 13 reactions

   This is a lovely way to deal with image crop and focal point with CSS only! 😍 And I love that Johannes put this warning in the beginning: While client-side…

2. • Nicolas Hoizey
   • 6 June 2023
   • Core Web Vitals, image, LCP, WebPerf
   • 6 reactions
   • permalink

   Apparently, an image whose part above the fold is indeed the largest, but of which only a small part can be seen, can be considered an LCP element, even if another image has a larger part visible... 😭

   You can see this for my photography site in this WebPageTest result:

   https://www.webpagetest.org/vitals.php?test=230606_BiDcN4_4NJ&run=3&cached=0#lcp

   

3. 

   Paul Hebert

   Watch Out for Layout Shifts with ‘ch’ Units

   • Nicolas Hoizey
   • 31 May 2023
   • WebPerf, Core Web Vitals, CLS, CSS
   • 5 reactions

   In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty…

4. • Nicolas Hoizey
   • 24 May 2023
   • CSS, image, responsive, WebPerf
   • 2 reactions
   • permalink

   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>?

5. • Nicolas Hoizey
   • 16 May 2023
   • Core Web Vitals, image, LCP, WebPerf
   • 3 reactions
   • permalink

   Limiting the image density on mobile devices drasticaly improves performance, with no visual loss, so we did it!

   

   I still wish it was much easier than dealing with <picture> and x descriptors for fluid images… 😞

   With a <img maxdensity="2.5" …> attribute for example!

   If you agree, comment:
   https://github.com/whatwg/html/issues/4421