Skip to content

Understanding Cumulative Layout Shift and CSS Grid Ordering on Mobile

Updated: at 04:58 AM

In the field of web performance optimization, Cumulative Layout Shift (CLS) has become a crucial metric. CLS assesses the stability of content on a webpage by quantifying how much visible content shifts during the loading process. Minimizing CLS is key for enhancing user experience and SEO performance, especially on mobile devices.

When you’re building websites, keeping pages stable as they load is super important, especially on mobile. One thing that can mess with this stability is when you play around with the order of items in a CSS grid, especially if you use negative values.

I have had an issue with BetaSeries for years, but I was unable to find any relevant information on the internet to solve it. After finally fixing the issue, I wanted to share my experience.

What’s the Issue?

CSS Grid lets you easily move items around on your webpage. Sometimes, you might be tempted to use negative numbers to get an item to show up earlier than it normally would. But on mobile, where everything loads from top to bottom, this can cause a problem. When an item moves up because of a negative order, it can push other content around. This makes the page jump or shift, which is annoying for people trying to read or interact with your site.

Example Time

Let’s say you have a grid layout, and you decide to move one item to the top using a negative order:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

.grid-item {
  order: 1; /* All items start here */

.special-item {
  order: -1; /* Moves this item to the top, which might cause shifting */

This bit of code moves .special-item above other items, potentially causing the page to shift as it loads.

How to Avoid These Shifts

To make sure your website loads smoothly on mobile, here are a few tips:

Bottom Line

Using CSS Grid is great, but moving items around too much, especially with negative order, can make your website less stable on mobile. Keep things simple and predictable to create a better experience for everyone visiting your site.