# Grid Exit > Remove cards from a CSS grid with AnimatePresence exit animations that hold their slot until the exit finishes, then FLIP the surviving cards into place with the layout prop. **Source:** [https://motion.svelte.page/examples/grid-exit](https://motion.svelte.page/examples/grid-exit) **Markdown mirror:** [https://motion.svelte.page/examples/grid-exit.md](https://motion.svelte.page/examples/grid-exit.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: exit in place, then FLIP the survivors. A fixed 3-column processing strip. Each card combines `layout` with enter/exit animations inside ``: completing a job fades its card out in the slot it currently occupies, and only then do the surviving cards slide over — one smooth FLIP, no snapping. **Metadata:** tag: `GRID-EXIT` | pattern: `exit + FLIP` ### Notes - In the default `sync` mode, an exiting card keeps its grid slot until its `exit` animation finishes — the card fades out exactly where it stands, even when earlier removals have already moved it to a new column. Survivors don't reflow mid-exit. - The `layout` prop does the second half: once the slot frees up, each surviving card FLIPs from its old column to its new one on the same spring — position is animated with transforms, so nothing repaints or stutters. - The cards render from a keyed `{#each}` with a stable `key` per job. Stable keys are what let `AnimatePresence` distinguish "this card left" from "every card changed" — without them, exits and FLIPs can't be attributed to the right element. ### Source #### Default.svelte Source file: [src/lib/examples/grid-exit/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/grid-exit/demos/Default.svelte) ```svelte

// processing queue {String(jobs.length).padStart(2, '0')} / {String(MAX_SLOTS).padStart(2, '0')} slots

{#if jobs.length === 0}

// idle — queue drained

{:else}

{#each jobs as job (job.id)} ({ height: '100%', minWidth: 0 }))} >

({ flex: 'none', width: 8, height: 8, borderRadius: '50%', backgroundColor: 'var(--brut-accent, #247768)' }))} > {job.name} complete(job.id)} whileHover={{ scale: 1.15 }} whileTap={{ scale: 0.85 }} style={styleString(() => ({ marginLeft: 'auto', flex: 'none', border: '1px solid var(--brut-rule-2, #bbc4c0)', backgroundColor: 'transparent', color: 'var(--brut-ink-2, #525252)', fontSize: '0.6875rem', lineHeight: 1, width: '1.25rem', height: '1.25rem', cursor: 'pointer' }))} > ✕

rows: {job.rows.toLocaleString()}
elapsed: {elapsed(job)}

{/each}

{/if}

= MAX_SLOTS} whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.96 }} transition={{ type: 'spring', stiffness: 500, damping: 30 }} style={styleString(() => ({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.08em', border: '1px solid var(--brut-accent, #247768)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', color: 'var(--brut-accent, #247768)', padding: '0.5rem 0.875rem', cursor: jobs.length >= MAX_SLOTS ? 'not-allowed' : 'pointer', opacity: jobs.length >= MAX_SLOTS ? 0.4 : 1 }))} > + enqueue job mode: sync / layout: flip

```