Prevent layout shifts with CSS grid stacks

This article was originally posted on my own site.

There are two reasons why people use CSS grid:

1. 😎 CSS is awesome! It’s a fact, deal with it.
2. 🛠️ Grid is a great tool to build complex two-dimensional layouts.

I sometimes have a third reason to use CSS grid: prevent layout shifts. I tried to find a fancy acronym for this technique but all I got was ALSGST: “Anti Layout Shift Grid Stacking Technique”. I guess I won’t be receiving many skill endorsements for “coining tech terms” on my LinkedIn profile so you better send me some suggestions.

Let me explain the technique using real examples. In this article, I’ll…