Swiper and CSS grid and/or flexbox

1

Hello,

Edit 1: I’ve fixed the formatting, and I’ll throw up a few codepens to show my problem (see edit 2 when it’s here!)

Edit 2: I’ve created 3 fiddles to show what I what I am trying to accomplish, and how the swiper doesn’t conform to the size of a div.

https://jsfiddle.net/mrphuzz/mosnw1vb/
https://jsfiddle.net/mrphuzz/mosnw1vb/15/
https://jsfiddle.net/mrphuzz/mosnw1vb/17/

I’m trying to use swiper by itself (not part of F7). I am designing a responsive page, and for my testing purposes, I have this CSS and HTML:

CSS:

.wrapper {
	display: grid;
	grid-template-columns: 5fr 3fr;
	grid-gap: 0.5em;
}
.wrapper > div {
	background:#eee;
	padding: 1em;
}
.wrapper > div:nth-child(odd) {
	background: #ddd;
}
.box3 {
	grid-column: 1/3;
}

HTML:

<div class="wrapper">
	<div class="box1">
		{swiper code here}
	</div>
	<div class="box2">
		{details go here}
	</div>
	<div class="box3">
		3 Lorem ipsum delor sit.
	</div>
</div>

When I add any swiper into any of the “boxes”, instead of it filling the div, it is huge It looks like, at least with the swipers I’ve used, all the slides become visible. I also find this behavior when I use flexbox instead of css grid. Now… if I change “5fr 3fr;” to something like “60% 40%” or “60vw 40vw”, the swiper width fills the width of the div, but then the height of div1 doesn’t increase to fit the height of the swiper. AND… I don’t really want to use percentages anyway, as the “fr” unit was designed for grids and don’t play nicely with paddings and margins.

So, the ultimate question for me is this: how can I use CSS grid (or flexbox) with the fractional units, and have the swiper fill the width of the div, and increase the height of the div to fit the height of the swiper?

Note: I’ve created 3 fiddles (linked above).

Thanks,
Michael

2

A codeine might be useful, your HTML hasn’t transferred well into your post so it’s a little hard to see what’s happening.

3

I have updated my post with better formatting and jsfiddle links. Thank you!

4

I’ve forked into a new JS Fiddle, is this the kind of layout you wanted? https://jsfiddle.net/kerrydp/erojxaL5/7/

5

Wow, thanks for the quick and awesome reply! I think this is exactly what I was looking for! I’m in the middle of taking down Christmas lights right now (but I couldn’t wait to see your fork), but I’ll inspect your fork in more detail later to make sure, and to look at the differences between yours and mine. Thank you so much!

6

Ah, no. I am desiring for “box1” to be responsive, to match the grid property “grid-template-columns: 1.25fr 1fr;”. Your change gave box1 a fixed width.

Coincidentally, I sometimes shop at a site that uses swiper for its product photos:

https://www.uncommongoods.com/product/master-theorem-book-of-puzzles

I looked at their source code, and it appears they don’t use CSS Grid or flexbox for this page’s layout, but I want to use css grid for my layout.

I hope this makes sense!

7

Your initial design wasn’t responsive, you set a fixed width for the containing div of 700px.

I recently made a client’s site using Swiper, feel free to take a look at varying window widths to see how to make things responsive: https://www.thelastmagi.com

8

Thanks for the response, I’ll check it out. As a side-note, it was responsive, below 700px, and that specific design was simply for testing purposes. For the fiddle, I set a max width of 700px to emulate having a max width for the design in real time. In actual development, I will be using media queries to change the number and placement of grid columns and rows. Anyway, thanks again, and I will check out the site.

Regards,
Michael

9

Try this one, if it helps: https://jsfiddle.net/kerrydp/5vopxwrb/15/