Transitioning Element Height with CSS Grid

Set up the HTML structure:

Start by creating the HTML structure for your expandable content. You will need a wrapper element and an inner content element. For example:

<div class="wrapper">
  <div class="inner">Expandable content</div>
</div>

Apply CSS Grid:

Add CSS styles to create a CSS Grid layout for the wrapper element. This will allow us to control the height of the inner content element. Add the following CSS code:

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

Here, we set the initial grid-template-rows value to 0fr to make the inner content element collapse and have a height of 0 pixels. We also add a transition property to create a smooth animation effect when the height changes.

Create the "open" state:

To expand the inner content element, we need to define the CSS styles for the "open" state. Add the following CSS code:

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

By adding the is-open class to the wrapper element dynamically, we can trigger the transition to the full height of the inner content element, specified by 1fr.

Hide overflow: To prevent the content from overflowing and creating scrollbars, we can hide the overflow of the inner content element. Add the following CSS code:

.inner {
  overflow: hidden;
}

Implement the toggle feature:

We can use either only CSS with the checkbox hack or use JS

LePhenix47 / Drag-n-drop_Younes-Lahouiti

[CONCEPT] How to smoothly transition to height auto #3

Transitioning Element Height with CSS Grid

Set up the HTML structure:

Apply CSS Grid:

Create the "open" state:

Implement the toggle feature:

Sources: