metafizzy / metafizzy/flickity
Is Flickity supposed to work in a CSS Grid layout?
- 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
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