How to animate changes in grid layout without fixed size

[skorphil]

Hi, is it possible to animate grid-layout changes without specifying fixed size to grid items?
I'm trying to animate the change in the grid from collapsed to expanded

.expanded {
    height: auto;
    grid-template-columns: 1fr 1fr;
  }
  
  .collapsed {
    height: 40px;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

However, i got unwanted distortions on grid items. The only way i managed to get rid of distortions is to specify sizes of grid item:

.fixed-size {
    width: 140px;
    height: 20px;
    background-color: grey;
  }

you can play with this demo here: https://codesandbox.io/p/devbox/qm3ts4

Any way to fix this without specifying fixed sizes?

framer.mov

[paperpluto]

Add layout="preserve-aspect" or layout="position" prop to the elements.

[skorphil]

Thanks, it is working! Didn't get it from the docs

…

On Wed, 7 Feb 2024 at 01:46, Paperpluto ***@***.***> wrote: Add layout="preserve-aspect" or layout="position" prop to the elements. — Reply to this email directly, view it on GitHub <#2506 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABTS4GNZUBXLM4S32JUIQZDYSKQE5AVCNFSM6AAAAABCZAYCNKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGOBYGI2TA> . You are receiving this because you authored the thread.Message ID: ***@***.***>