Super simple 0 to auto height trick using CSS

A simple CSS-only method of height animation 0% to 100%.  
<div class="quick-example">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti, sint distinctio deserunt vel unde consequatur sequi nobis necessitatibus quis ad officiis doloremque ab, blanditiis facere possimus obcaecati voluptate sed!</p>
<p>Voluptas, ipsa porro? Ex nostrum culpa magnam magni officiis laboriosam fugit molestias amet reiciendis sunt facere, debitis odit neque totam natus ad aliquam minus, sed repellat eveniet, et impedit ipsa.</p>
html {
color-scheme: light dark;

body {
margin: 3rem;
font-size: 2rem;
font-family: system-ui;

.quick-example {
margin: 1rem;
padding: 1rem;
background: hsl(200 50% 50% / 0.4);
border-radius: 0.5rem;

display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 500ms;

.quick-example > div {
overflow: hidden;

.quick-example:hover {
grid-template-rows: 1fr;

Recent Article

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Nidhin at 11:58 am

    Thanks for this. It helped me in one of the challenging height animation implementations.

    • Anish at 10:28 pm

      You’re welcome! I’m glad to hear that the information was helpful for your height animation implementation. If you have any more questions or need further assistance, feel free to ask. Happy coding!

  • Keep your skills sharp, get informed.

    Subscribe to our mailing list and get interesting stuff and updates to your email inbox