DEV Community

Méschac Irung
Méschac Irung

Posted on

1 1 1 1 1

TailwindCSS Tip : How to prevent Layout Shifts With Aspect Ratio

Imagine you’re reading a blog post. You’re immersed in the text when, suddenly, an image or video loads above the section you’re reading, and the content shifts downwards. You lose your place, get frustrated, and might even leave the page. Sounds familiar? It’s happened to almost everyone.

This happens because the browser didn’t know how much space the media element would take up until it was fully loaded.

Withou aspect ratio

<div class="max-w-md">
    <div>
        <img class="rounded-md" src="https://images.unsplash.com/photo-1668541491433-e96f4059e345?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gorilla in Congo"/>
        <span class="text-xs text-gray-500">Photo by <a href="https://unsplash.com/@cecile_colombo?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">cecile colombo</a> on <a target="_blank" href="https://unsplash.com/photos/a-gorilla-standing-on-a-log-in-the-woods-GNnqwEouj-U?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></span>
    </div>
    <p class="mt-6">
        Here’s the paragraph you were reading before the image pushed it down unexpectedly.
    </p>
</div>
Enter fullscreen mode Exit fullscreen mode

The image loads dynamically, pushing the paragraph down and disrupting your reading flow.

The Solution: Use aspect-ratio

By applying the aspect-ratio utilities, you tell the browser exactly how much space the image or video will occupy, avoiding any layout shifts.

The aspect-* utilities in TailwindCSS are essential for eliminating layout shifts—those sudden changes in the layout caused by dynamically loaded content like images, videos, or iframes. By setting a consistent aspect ratio, you ensure the browser reserves the correct amount of space for the element before the content is loaded, preventing the rest of the page from jumping unexpectedly.

tailtips with aspect-ratio

<div class="max-w-md w-full">
    <div>
        <div class="aspect-3/4">
            <img class="rounded-md size-full object-cover" src="https://images.unsplash.com/photo-1668541491433-e96f4059e345?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gorilla in Congo" loading="lazy"/>
        </div>
        <span class="text-xs text-gray-500">Photo by <a href="https://unsplash.com/@cecile_colombo?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">cecile colombo</a> on <a target="_blank" href="https://unsplash.com/photos/a-gorilla-standing-on-a-log-in-the-woods-GNnqwEouj-U?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></span>
    </div>
    <p class="mt-6">
        Here’s the paragraph you’re reading, undisturbed by layout shifts.
    </p>
</div>
Enter fullscreen mode Exit fullscreen mode
  • aspect-3/4: Reserves space for the media, maintaining a 3:4 ratio.
  • Result: The layout remains stable, and the reading experience is smooth.

Indispensable for User Experience

  • Consistent Proportions: Whether it’s a video, image, or card, aspect-ratio ensures every element scales uniformly.

  • Better Performance: Reduces layout shifts, improving Core Web Vitals (like CLS—Cumulative Layout Shift) and SEO rankings.

  • Enhanced User Experience: Keeps content stable, preventing frustrating disruptions.

Flexible Ratios with aspect-[ratio]

TailwindCSS only includes 3 aspect-ratio utilities by default: aspect-auto, aspect-square, and aspect-video.

For other proportions such as 3:4, use arbitrary values like aspect-3/4. This allows you to create custom aspect ratios for any element, ensuring a consistent layout across your site.

Build Stable, Professional Layouts

The aspect-* utilities aren’t just a convenience—they’re a necessity for polished, stable, and responsive designs. By reserving space and preventing layout shifts, they ensure your pages look professional and provide a smooth, frustration-free experience for users.

Say goodbye to layout jumps and hello to visually stable designs with aspect-ratio!

More Resources

More Tips

Want to take your TailwindCSS skills to the next level? Tailtips is packed with actionable tips and tricks to help you build better, faster, and smarter with TailwindCSS. From creative solutions like gradient borders to advanced techniques and best practices, Tailtips has everything you need to master TailwindCSS.

Discover Tailtips

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay