Animate CSS Auto Height Without Javascript

Web developers rejoice! There's an easy way to animate the height of an HTML element even if the height is dynamic, determined by its content, with only CSS. This is typically used for navigation menus and the like, and now it's much easier to code and maintain.

The strategy is to actually animate the grid-template-rows not the height. For example, take the following HTML markup:

<div class="menu">
  <div class="inner-wrapper">
    <p>Here is some content.</p>
    <p>Here is some content.</p>
    <p>Here is some content.</p>
  </div>
</div>

The CSS for this markup would be:

.menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 100ms;
}

.menu.active {
  grid-template-rows: 1fr;
}

.menu .inner-wrapper {
  overflow: hidden;
}

Initially the outer div will be hidden since it has no overflow and the grid template rows are zero. When you add active to the outer div element's class list, the browser will animate the transition from zero row height to 1fr, which essentially means the height it needs for its content to render.

#css #html #javascript #code #tech #YOUREWELCOME

May 16, 2023

About Non Sequiturs

Non Sequiturs is the personal blog of Michael Argentini.

I'm a software developer and Managing Partner for Fynydd and Blue Sequoyah Technologies, the project lead for Coursabi, and Āthepedia founder. I also have several nerdy open source projects on Github.

I'd describe myself as an Oxford comma advocate, autodidact, aspiring polymath, and boffin, with a mechanical keyboard addiction. You can also find me on Mastodon.

Michael Argentini

Copyright © 2024 Michael Argentini. All rights reserved.