1 Matching Annotations
- Nov 2023
-
-
✅ We can actually use a neat trick which basically consists in making a CSS grid with a single grid item. All we really have to do then, is taking our grid-template-rows and make it transition from 0fr to 1fr: this way, our grid item will transition from 0 to its "natural" height. It's THAT simple:
```css .accordion - body { display: grid; grid - template - rows: 0 fr; transition: 250 ms grid - template - rows ease; }
.accordion: hover.accordion - body { grid - template - rows: 1 fr; }
.accordion - body>div { overflow: hidden; } ```
-