metafizzy / metafizzy/flickity

Is Flickity supposed to work in a CSS Grid layout?

Open
#972 2 comments 10 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.6k
Forks
593
PR merge metrics
No merged PRs in 30d

Description

Before I go down the rabbit hole of trying to figure out why it's not working cleanly for — is Flickity compatible with CSS grid? As in, should I be able to place it within a grid-area without the slides showing unexpected behavior?

I can currently only make this work if I give the carousel cells an exact pixel value, making it no longer responsive. If I use 100% width, the cells always end up overlapping, as the value for "left" in the carousel cell is apparently calculated to be an unexpected percentage. This persists until I resize the browser window, after which the cells jump into their respective places and the carousel works fine.

Is this something that I'm doing wrong on my end or is CSS grid not supported at this point?

Contributor guide

Open the contributing guide

Research direction

The issue provides no file, reproduction case, or test entry point. Start by reproducing the carousel inside a CSS Grid area with responsive 100% cells, compare it with fixed-pixel cells, and verify whether resizing changes the cell positions. Done means determining whether this is supported behavior, a reproducible bug, or a documentation gap.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.