CSS Grid Can Do Auto Height Transitions

The Problem: Why Height Auto Transitions Didn't Work

For decades, CSS transitions had a fundamental limitation: they could only interpolate between numerical values. When you tried to transition height from 0 to auto, the browser couldn't calculate intermediate values because auto isn't a number--it's a keyword meaning "figure out the height based on content."

This seemingly simple use case--expanding a collapsible section, opening a dropdown, revealing hidden content--required JavaScript workarounds that added complexity and potential performance issues.

The common workaround? Transition max-height to an arbitrarily large value. But this caused timing problems--the animation duration was based on the maximum possible height, not the actual height, resulting in timing that felt wrong for short or long content.

According to Keith J. Grant's analysis, this limitation frustrated developers for years and led to complex JavaScript solutions that were difficult to maintain and often performed poorly in browsers.

Modern web development increasingly favors CSS-first approaches that leverage native browser capabilities rather than JavaScript workarounds, resulting in cleaner code and better performance.

The CSS Grid Solution

The breakthrough came from Nelson Menezes, who discovered that CSS Grid's grid-template-rows property can be transitioned smoothly. By placing content in a grid container and transitioning grid-template-rows from 0fr to 1fr, the browser animates the row height to match the content's natural height--effectively animating to auto without using the auto keyword.

This works because fractional units (fr) are numerical values that CSS can interpolate between. When you set grid-template-rows: 0fr, the grid row has zero height. When you change to 1fr, the row expands to fit the content, and the browser handles the animation smoothly.

As documented by CSS-Tricks, this discovery opened up entirely new possibilities for CSS-based animations and became widely adopted across modern browsers.

This technique is just one example of how modern CSS has evolved to handle complex UI requirements that previously needed JavaScript. Our web development services team stays current with these advancements to build performant websites.

Accessibility Considerations

One crucial aspect often overlooked is accessibility. When an element animates from hidden to visible, screen readers may still access the content even when it's visually hidden. Implement proper ARIA attributes to ensure inclusive user experiences.

ARIA Implementation

<button class="toggle-button"
 aria-expanded="false"
 aria-controls="expandable-content">
 Toggle Content
</button>

<div id="expandable-content"
 class="grid-wrapper"
 aria-hidden="true">
 <div class="grid-inner">
 <div class="expandable-content">
 <!-- Content -->
 </div>
 </div>
</div>

toggleButton.addEventListener('click', () => {
 const isOpen = gridWrapper.classList.toggle('is-open');
 toggleButton.setAttribute('aria-expanded', isOpen);
 gridWrapper.setAttribute('aria-hidden', !isOpen);
});

Respecting User Preferences

For users who prefer reduced motion, disable the animation entirely:

@media (prefers-reduced-motion: reduce) {
 .grid-wrapper {
 transition: none;
 }

 .grid-wrapper.is-open {
 grid-template-rows: 1fr;
 }
}

As Stefan Judis demonstrates, proper accessibility implementation ensures that all users can interact with animated content regardless of their abilities or device.

Accessibility is a core principle in our approach to web development, ensuring websites work for everyone regardless of ability or device.

Performance Benefits

The CSS Grid approach offers significant performance advantages over JavaScript-based height animations:

GPU Acceleration

CSS transitions often use the GPU for smoother animations, resulting in 60fps performance without blocking the main thread. This means animations remain buttery smooth even on lower-powered devices.

No Layout Thrashing

JavaScript solutions that measure scrollHeight can cause layout thrashing--repeatedly forcing the browser to recalculate layout. The CSS approach avoids this entirely because the browser handles all calculations internally.

Simplified Codebase

Less JavaScript means smaller bundle sizes, fewer potential bugs, and easier maintenance. Your production code remains lightweight while delivering sophisticated animations.

Native Browser Optimization

Browsers can optimize CSS transitions more effectively than JavaScript-based animations, taking advantage of hardware acceleration and internal rendering optimizations.

According to Keith J. Grant's performance analysis, the CSS Grid approach represents a fundamental improvement in how we implement animations on the modern web.

Performance optimization through modern CSS techniques like this directly contributes to better SEO performance, as search engines prioritize fast, responsive websites in their rankings.

Flexbox Alternative Approach

While the CSS Grid approach is cleaner, a flexbox-based alternative exists for those who prefer not to use Grid. This approach leverages how max-height works within flex containers:

.flex-wrapper {
 display: flex;
}

.flex-inner {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.5s ease-out;
}

.flex-wrapper.is-open .flex-inner {
 max-height: 100%;
}

However, this approach requires an additional wrapper element and the animation timing can still be less precise than the grid method. As Keith J. Grant explains, the CSS Grid technique remains the recommended approach for most use cases due to its simplicity and precision.

For teams already using flexbox layouts extensively, this alternative provides a familiar pattern, but the CSS Grid method ultimately offers superior animation timing and requires fewer DOM elements.

Our web development experts can help you choose the right approach for your specific use case, considering browser support, performance requirements, and maintainability.

Caveats and Limitations

Padding Considerations

Both the grid and flexbox approaches have a limitation regarding padding: you cannot add padding directly to the collapsing element. If you need padding, add an inner element and apply the padding there:

<div class="grid-wrapper">
 <div class="grid-inner">
 <div class="content-with-padding">
 <!-- Your content here -->
 </div>
 </div>
</div>

.content-with-padding {
 padding: 1rem;
}

As Keith J. Grant notes, this extra wrapper element is a small trade-off for the significant benefits the technique provides.

Nested Animations

When nesting multiple animated elements, each layer adds complexity to the animation sequence. Consider whether all levels truly need animation or if some can simply show and hide instantly without animation.

Dynamic Content Changes

If content changes dynamically after animation completes, you may need to reset the animation to ensure smooth transitions. In most cases, toggling the class off and back on will re-trigger the animation to the new content height.

Browser Support

CSS Grid row transitions are now supported across all modern browsers including Chrome, Firefox, Safari, and Edge. The technique works seamlessly without any polyfills required for the vast majority of users.

Advanced Techniques

Multi-Step Animations

Chain multiple CSS transitions for more complex effects that create sophisticated user experiences:

.grid-wrapper {
 display: grid;
 grid-template-rows: 0fr;
 transition: grid-template-rows 0.5s ease-in-out;
}

.grid-wrapper.is-open {
 grid-template-rows: 1fr;
}

.grid-inner > * {
 opacity: 0;
 transition: opacity 0.3s ease-out 0.2s;
}

.grid-wrapper.is-open .grid-inner > * {
 opacity: 1;
}

This fades in the content after the height animation completes for an elegant reveal effect that draws the user's attention naturally.

Variable Timing Functions

Different timing functions dramatically change the animation feel and can be tailored to match your brand's personality:

/* Smooth, natural feel */
transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);

/* Quick snap */
transition: grid-template-rows 0.2s ease-out;

/* Elegant bounce */
transition: grid-template-rows 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

Variable Height Content

The beauty of this technique is that it handles variable content heights automatically. Whether your expanded content is 50 pixels or 500 pixels, the animation duration remains consistent and the timing feels natural.

Conclusion

The CSS Grid auto height transition technique represents a significant advancement in what CSS can accomplish without JavaScript. By leveraging the animatable nature of grid-template-rows, developers can create smooth, performant height animations that work across all modern browsers.

This technique simplifies code, improves performance, and enables more sophisticated UI patterns without JavaScript complexity. Whether you're building accordions, dropdowns, drawers, or any expandable content pattern, the CSS Grid approach should be your go-to solution for smooth height animations.

Key takeaways:

• No JavaScript required for height animations -- pure CSS delivers excellent results
• Works in all modern browsers without any polyfills
• GPU-accelerated for smooth 60fps performance on all devices
• Minimal code with maximum impact on user experience
• Always implement accessibility attributes for inclusive design

Our web development team specializes in implementing modern CSS techniques like this to build performant, accessible websites. If you're looking to enhance your website with smooth animations and interactions, get in touch to discuss your project.

Sources

1. CSS-Tricks: CSS Grid Can Do Auto Height Transitions - The seminal article that introduced the CSS Grid auto height transition technique, originally discovered by Nelson Menezes

2. Stefan Judis: How to animate an element's height with CSS grid - A comprehensive step-by-step tutorial with accessibility considerations and ARIA implementation guidance

3. Keith J. Grant: Transitioning to Height Auto (Two Ways) - Comparison of grid and flexbox approaches with performance analysis and code examples