[筆記] CSS Transition From Height To Auto Use Grid

設定 grid-template-rows: 0fr ，產生 height: auto 動態的過渡效果

• 先設定元素為 grid 元素
• 設定 grid-template-rows: 0fr
• 在 hover 或 點擊時，再 設定 grid-template-rows: 1fr，即可依內容動態展開對應的高度
• 設定 transition: grid-template-rows 500ms，即有平滑的過渡效果

Demo

css docker n8n Nginx VPS VS Code wordpress