Grid animation

概要

CSS Gridのトラックサイズをスムーズにアニメーション・トランジションさせる機能です。パネルの展開・折りたたみやレイアウトの動的な切り替えを、滑らかなアニメーションで実現できます。すべての主要ブラウザで広くサポートされています。

対応ブラウザ

基本構文

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.3s ease;
}
.grid.collapsed {
  grid-template-columns: 0fr 1fr;
}

実務での使いどころ

• サイドバーの展開・折りたたみ

  Gridトラックサイズをアニメーションさせて、サイドバーをスムーズに展開・折りたたむUIを実現します。

注意点

アクセシビリティ

• prefers-reduced-motionメディアクエリを使用して、モーション設定を尊重するアニメーションの無効化を実装してください。

参考リンク

• MDN Web Docs — Grid animation