設定 grid-template-rows: 0fr
,產生 height: auto 動態的過渡效果
- 先設定元素為 grid 元素
- 設定
grid-template-rows: 0fr
- 在 hover 或 點擊時,再 設定
grid-template-rows: 1fr
,即可依內容動態展開對應的高度 - 設定
transition: grid-template-rows 500ms
,即有平滑的過渡效果
Demo
css Nginx VPS VS Code wordpress