Swiper: CSS Grid + Swiper Wrapper - wrong width calculated

[edwardjosephbennett]

This is a (multiple allowed):

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

• Swiper Version: 4.4.2 from CDNJS
• Platform/Target and Browser Versions: Latest Chrome on macOS (confirmed issue is happening in Latest Safari also)
• Live Link or JSFiddle/Codepen or website with isssue: https://codepen.io/anon/pen/pqJBWX
  (Also raised with others: https://codepen.io/meredevelopment/pen/yorRMm and here on your forums: http://idangero.us/swiper/forum/#!/?css%20grid)

What you did

A basic CSS grid setup with 3 columns setup on a wrapper. Carousel is set up within the 3rd column with a width of 1fr (which should take up 1fr of the remaining space of the max-width container). For code example see codepen showing issue. Code is direct replica of code in my development build.

Expected Behavior

Swiper wrapper is to take up the remaining space of the container instead of overflowing with the correct slidesPerView visible

Actual Behavior

Swiper wrapper is overflowing, with slidersPerView being ignored. Wrapper is showing width of entire width of elements.

[nolimits4web]

In such layout, there is no clear way in this case to detect available "cell" width -> so swiper can't calculate its own and slides size. You can fix this current layout but changing width: 100vw on .carousel or by using flex instead of grid

[mxwendt]

I had a similar issue and found a solution.

You can prevent Swiper from overflowing by adding an overflow: hidden to the parent element (in your case the .wrapper).

And there was also an issue with your grid column setup. .sidebar should have a value of 1 / 2 and .carousel a value of 2 / 3.

I updated your Codepen example: https://codepen.io/anon/pen/MdmxNp

[ankedsgn]

Almost a year later and grid is a best practice. It would really help if this issue would not exist anymore. :)

The fix from https://github.com/nolimits4web/swiper/issues/2914#issuecomment-493384617 worked like a charm nonetheless!

And of course, thank you for swiper, it works really well, and kudos for the good docs!

[suxscribe]

I had a similar issue and found a solution.

You can prevent Swiper from overflowing by adding an overflow: hidden to the parent element (in your case the .wrapper).

And there was also an issue with your grid column setup. .sidebar should have a value of 1 / 2 and .carousel a value of 2 / 3.

I updated your Codepen example: https://codepen.io/anon/pen/MdmxNp

Your solution only works if you set width of some column in 'px'.
If columns are set in 'fr' swiper takes all the space and goes into infinity (I have 6-digit numbers in 'translate3d' property of the slides)

[ckihneman]

At the very least, there should be a "Gotchas" section, or something to that effect added to the documentation that notes this blatant issue. I can imagine many people, like myself, pulled their hair out for far, far too long thinking something was wrong with our setup.

In my case, it was a basic flex layout. Adding overflow: hidden to the parent did fix the issue immediately.

[rilwis]

I got the same issue and the overflow: hidden trick doesn't work. I think the problem is similar to what @suxscribe described. I set the layout using fr, not px.

This is my screenshot: https://prnt.sc/ry8y59

[vampics]

+1

[migueltrias]

Still happening... Swiper goes bonkers if it's in a Grid with FR units.

When changing grid-template-columns to percentage instead fr, it works, but makes the "grid gaps" calculation more tedious this way.

[const-int]

Still happening... Swiper goes bonkers if it's in a Grid with FR units.

When changing grid-template-columns to percentage instead fr, it works, but makes the "grid gaps" calculation more tedious this way.

Thank you, helped a lot.

[kobekoto]

+1

[tiadaguru]

Have there been any other fixes? This thread was created on Swiper 4.2.2, but I'm getting similar painful behavior with SwiperJS v6.1.2 & CSS Grid.

In some scenarios, Swiper disregards the grid (as if it has been absolutely positioned). In some scenarios, Swiper will not resize responsively (i.e,. always the max-width of the grid child it's in), even within a breakpoint. Setting overflow:hidden does not fix the issue, and unluckily, we are tied to the fr units. It's one of grid's by-design features to automatically calculate the viewport in fractional units.

I wish we could use flexbox in our layout, but the site is quite deeply integrated in grid. I agree with @ckihneman: if CSS grid incompatibilities are present in the stable release, it should be noted somewhere in the documentation. Grid is a first-class citizen of CSS, at least since early 2017.

The only reliable solution I've found: very carefully limiting the nesting of any SwiperJS element, even divs with zero CSS set. I can get, at most, exactly grid -> grid child -> swiper element. Anything more destroys the layout.

[aomini]

I thought overflow is working but it doesnt seem to work, breakpoints get messed up.
Is there any way to tackle the fr grid problem? ..... This issue is related to back to 2018
https://github.com/nolimits4web/swiper/issues/2606

[arnaudjnn]

Works for me like this:

```
/** @jsx jsx */
import { jsx, Grid } from '@chakra-ui/core';
import Swiper from 'react-id-swiper';

function CarouselGrid() {

const params = {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
}

return (
  <Grid gridTemplateColumns="1fr 3fr">
    <div>
      Col Left
    </div>
    <div sx={{ width: '100%', overflow: 'hidden'}}>
      <div sx={{
        '.swiper-container': {
          width: '100%'
        }
      }}>
        <Swiper {...params}>
          <div sx={{ bg: 'gold' }}>Slide #1</div>
          <div sx={{ bg: 'red' }}>Slide #2</div>
        </Swiper>
      </div>
    </div>
  </Grid>
)

}

[uldo]

instead of 'auto' in grid-column definition, you can use 'minmax(0, auto)'. the column width gets calculated in pixel, so the swiper calculates its width correctly.

[mintbird]

My workaround to solve this problem for a single-slide slider that placed inside flex item.

.swiper-slide {
    width: 100% !important;
}

Tested in Swiper 6.4.8

[vhoyer]

Just to contribute to the catalog of workarounds: in my case I was using only a single column in the grid, so I instead of using the default value for grid-template-columns, I explicitly set it to grid-template-columns: 100%; and it worked wonders, thank you guys ;)

[dungle-scrubs]

One more workaround to add, as I've noticed something specific. If I have a 2-column grid (using grid-template-columns: 1fr 1fr), the crucial part is that the immediate child in the column must have overflow: hidden. Then, Swiper will calculate its width correctly no matter how far nested it is.

• container (grid, two columns)
  
  
  
  • div (100% width, overflow hidden)
  
  
  • div
    
    
    
    
    
    • div
    
    
    
    • swiper
    
    
    
  
  

If the immediate child of the column is not set to overflow hidden, the width won't be calculated correctly

This will break:

• container (grid, two columns)
  
  
  
  • div
  
  
  • div
    
    
    
    
    
    • div (100% width, overflow hidden)
    
    
    
    • swiper
    
    
    
  
  

[Janchey]

@dungle-scrubs That looks like something that might work for me. Just need on some more info on this. I will need to have something like this in order for swiper to calculate thing right:

• container (grid, grid tempate columnd 1fr 1fr)
• div (grid column span 1, 100% width, overflow hidden)
• swiper

or is it more like this:

• container (grid, two columns)
• div (grid column span 1)
• div (100% width, overflow hidden)
• swiper

[dungle-scrubs]

@dungle-scrubs That looks like something that might work for me. Just need on some more info on this. I will need to have something like this in order for swiper to calculate thing right:

• container (grid, grid tempate columnd 1fr 1fr)
• div (grid column span 1, 100% width, overflow hidden)
• swiper

or is it more like this:

• container (grid, two columns)
• div (grid column span 1)
• div (100% width, overflow hidden)
• swiper

I believe that the second one you mentioned will break. For me, the immediate grid-child must have the overflow: hidden property, but I'm not sure why it's behaving that way.

Have you had any luck?

[Janchey]

@dungle-scrubs That looks like something that might work for me. Just need on some more info on this. I will need to have something like this in order for swiper to calculate thing right:

• container (grid, grid tempate columnd 1fr 1fr)
• div (grid column span 1, 100% width, overflow hidden)
• swiper

or is it more like this:

• container (grid, two columns)
• div (grid column span 1)
• div (100% width, overflow hidden)
• swiper

I believe that the second one you mentioned will break. For me, the immediate grid-child must have the overflow: hidden property, but I'm not sure why it's behaving that way.

Have you had any luck?

Yes I did. It was a bit different for me. Parent of a slider had to be of width: 100%.

[levazver]

Right now solution is using minmax(0, 1fr) instead of 1fr.