Is there any option to make photo collage inside glide

[Manikandan_R]

Photo collage inside the glide app.is it possible? May be use of css?

[ShantanuIyengar]

All odd elements would be having this code

div[id*=‘screenScrollView’] > div > :nth-child(1) > div > div {
width : 50%;
height : 50%;
background : transparent;
margin-left : 0.3px
}

All even elements would be

div[id*=‘screenScrollView’] > div > :nth-child(2) > div {
width : 50%;
height : 50%;
margin-top:-187.5px;
margin-left: 187.5px
}

So my details view has 4 images
the code for the same is:

<pre><span><style>
div[id*=‘screenScrollView’] > div > :nth-child(1) > div > div {
width : 50%;
height : 50%;
background : transparent;
margin-left : 0.3px
}
div[id*=‘screenScrollView’] > div > :nth-child(2) > div {
width : 50%;
height : 50%;
margin-top:-187.5px;
margin-left: 187.5px
}
div[id*=‘screenScrollView’] > div > :nth-child(3) > div > div {
width : 50%;
align: end;
margin-left : 0.3px
}
div[id*=‘screenScrollView’] > div > :nth-child(4) > div {
width : 50%;
margin-top:-187.5px;
margin-left: 187.5px
}

[ThinhDinh]

Does this work the same way in desktop view? Good work.

[ShantanuIyengar]

Not really! The margin-left and margin-top are different on a bigger screen!
All about finding a sweet spot!

[Himaladin]

I have tried your CSS inside GDE and it doesn’t work.
You might try the one below. This CSS may work for any size of the screen.

<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type(1) {
width : 50%;
height : 50%;
background : transparent;
margin-left : 0%
}
div[id*='screenScrollView'] > div > :nth-of-type(2){
width : 50%;
height : 50%;
margin-top:-50%;
margin-left: 50%
}
div[id*='screenScrollView'] > div > :nth-of-type(3){
width : 50%;
margin-left : 0%
}
div[id*='screenScrollView'] > div > :nth-of-type(4){
width : 50%;
margin-top:-50%;
margin-left: 50%
}

[ThinhDinh]

Why don’t we do it with an inline list?

[Himaladin]

How about this?