<input type="checkbox" id="ex"><div class="xc"><label for="ex">What is grid-template-rows?<i>＋</i></label><div class="bd"><p>Animating the row track from 0fr to 1fr lets the content grow to its real height.</p></div></div>About this accordion
A card that opens smoothly by animating grid-template-rows from 0fr to 1fr, avoiding any max-height guesswork.
How it works
The body of the card is a grid whose single row is 0fr when closed and 1fr when open. Transitioning grid-template-rows lets the content grow to its real height, which max-height tricks cannot do without guessing a number. The paragraph has overflow hidden so it is clipped while the row is collapsed.
Ways to customise it
- Replace the paragraph with any content, since the height adapts.
- Change the 0.4s transition duration.
- Change the colours of the title and the plus icon.
Good to know
Animating grid-template-rows is supported in current browsers and falls back to an instant change elsewhere. The checkbox keeps it keyboard accessible, but a details element is a better semantic choice for FAQs.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.