[筆記] 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 Nginx VPS VS Code wordpress