List transitions behave differently with display: grid vs flex

[robertbel]

This may just be a CSS limitation, but I’d appreciate any direction or advice on how to approach this and how to know these kind of things are not related to motion-v.

Vite.App.-.Google.Chrome.2026-01-12.13-57-13.mp4

1. Describe what is happening

I want to display modals in a somewhat unique way: the last opened modal should be on its own, while the rest are stacked on the left. I thought I was being clever by using the stacking “trick” with display: grid, but this causes things to look bad when closing the last/right modal. I feel like this should just work, because with display: flex everything behaves as expected when closing modals.

In my example, I have:

• A modal-container that displays the modals from the openModal array
• A button to add new modals
• Each modal has a close button

With display: flex on the modal-container:

• The animation for adding modals is correct ✅
• The animation for removing modals is correct ✅
• The overall layout is wrong (I want stacked modals) ❌

With display: grid on the modal-container:

• The animation for adding modals is correct ✅
• The animation for removing modals is wrong ❌
• The overall layout is correct (modal stacking) ✅

---

2. CodeSandbox reproduction

https://codesandbox.io/p/sandbox/motion-modals-f4qrck

---

3. Steps to reproduce

1. Toggle “Toggle display property” to set it to display: grid;
2. Add a few modals (looks good!)
3. Close the modal on the right (this looks bad and is what I’m trying to fix)

---

4. Expected behavior

When using display: grid, the next modal in the stack (on the left) should slide over smoothly, just like it does when using display: flex.

---

6. Environment details

Any browsers. Used dependencies are:

"@vueuse/core": "^14.1.0", "motion-v": "^1.8.1", "vue": "^3.5.22",

[rick-hup]

Hi @robertbel!
The difference in behavior comes down to how AnimatePresence's popLayout (which sets exiting elements to position: absolute)

With flex, when an element is absolutely positioned out of the flow, its siblings immediately reflow and animate smoothly into the new space.
However, with grid, the layout reflow for sibling elements often doesn't trigger a smooth transition until the exiting element's DOM node is fully removed. This can lead to the abrupt layout shift you're seeing, as grid typically recalculates after the element is gone, rather than animating the gap-filling as effectively as flex does in this scenario.

But you can wrapping your animating list items with a LayoutGroup component. This allows motion-vue to track and animate the layout changes of the remaining siblings more effectively after an exiting element is removed, providing the smooth transition you expect.

<template>
  <LayoutGroup> <!-- Wrap the AnimatePresence with LayoutGroup -->
    <AnimatePresence>
      <motion.div
        v-for="modal in openModals"
        :key="modal.id"
        layout
        class="modal"
        :initial="{ opacity: 0, y: 50, scale: 0.8 }"
        :animate="{ opacity: 1, y: 0, scale: 1 }"
        :exit="{ opacity: 0, y: -50, scale: 0.8, transition: { duration: 0.2 } }"
      >
        <!-- Modal content -->
      </motion.div>
    </AnimatePresence>
  </LayoutGroup>
</template>

Cap.2026-01-12.at.23.12.21.mp4

[robertbel]

Ah! That’s a lot better already. The flex vs grid flow thing is unfortunate, but it makes total sense.

I’m now playing around with a solution using flex, where the stacking still happens. Not sure yet if it’s going to work, but it’s definitely worth a try. Thanks for the quick reply and the help!