I purposely avoided using gap in my demo to avoid this specific issue. Instead I used padding on the inner element.
The gap property doesn’t work well with percentage widths as it adds to the width which means that all your calculations would need to include the gap offset as well in the css and js. Of course that’s not so easy because in my example the number of gaps depends on how many items are across the screen so you would need to do it multiple times in each media query and indeed in the js.
It is therefore much simpler to simply pad the inner element instead to increase the space. You should be able to do exactly what you want with using padding and not interfere with the calculations at all.
As an example here’s a simple demo showing the GAP problem and a solution for simple cases.
The 1rem gap is offset using calc(). It uses .5rem because there are 2 panels of 50%.
flex-basis: calc(50% - 0.5rem);
I still advocate using padding on the inner element where possible.
There’s a gap between slides in my example. What’s the difference? You’d just use an inner element for the background color if needed or use a white border instead. Plenty of ways to do this without using gap
To reiterate again the problem with using the gap property is twofold.
Firstly as shown in that last demo we can’t simply get two items across by having two items of 50% because the ‘gap’ in the middle also takes up room so you get 50% + 50 % + 1rem. 100% + 1 rem is too wide for any element and so overflows.
The issue is compounded if you want 4 items across because now you have three gaps in-between that you would need to offset.
The second issue that arises is that the js is sliding the panels across a screenful at a time and assuming they are in 100% units. However you would now need to slide taking into account how much more than 100% the gap property has made the panels.
I suggest that you avoid those extra headaches as you will have to take into account the different number of slides as the screen resizes.
Just use padding on that inner element instead as in my demo. If you don’t want the background color to cover the padding then you can try background-clip or indeed just nest an inner element.
Hello everyone, I have difficulty understanding these new codepens, and their purpose.
It may be easy for me to comprehend if you can suggest while I eliminate the gap property from here what new padding should I insert and where.