Swiper: Does not work with fr units using grid layout

[alexbudure]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 4.2.2
• Platform/Target and Browser Versions: CHROME
• Live Link or JSFiddle/Codepen or website with isssue: https://codepen.io/alexbudure/pen/deNpRV

What you did

Tried to place the slider in a container that has the sizing 1fr from grid.

Expected Behavior

The slider should use the intrinsic sizing of 1fr and fit accordingly.

Actual Behavior

The slider extends the width of the container and does not care for the size 1fr. I can get it working doing grid-template-columns: calc(100% - 300px) 300px; but that defeats the whole purpose of 1fr and gets really messy when you start to have grid gaps.

[nolimits4web]

How is it related to Swiper itself? Looks like generic CSS issues. Swiper must have some fixed size or size that can be calculated to limit the inner wrapper element size

[alexbudure]

Flickity knows how to handle this, why can’t swiper also know?

So you’re saying let’s not use swiper and CSS grid at the same time? That doesn’t sound like a proper solution considering more and more use the grid layout 😕

[jonnitto]

Please reopen this issue, as this a serious bug

[thamas]

Found a way to make it work(?): https://codepen.io/thamas/pen/JwoQPq

[acespace90]

Same trouble for me using fr units with css grid.

[michaelpumo]

I have a swiper inside a CSS grid column with an fr based width. This causes swiper to become huge and fill the entire screen. If I change the fr to a fixed width like 500px then the problem goes away.

Can swiper not calculate the width of the container it's sitting in with fr?