CODEWITHSUNDEEP
cssmasonry
SoulieBaby
SoulieBaby

Reputation: 5471

Image CSS Masonry layout

I'm trying to do a CSS Masonry layout with images using the code below (which is within a foreach loop in PHP):

<div class="pagepix">
  <img alt="Testing 02" src="/images/thumbnail/image__xeKPEyHYPAnxsnKCWMKQ_1411534017.jpg">
  <img alt="Testing 01" src="/images/thumbnail/image__uVfmzTwGzakmClDShyDA_1411533981.jpg">
  <img alt="Testing 05" src="/images/thumbnail/image__WmLHwllUknhfDjocHqxn_1411533993.jpg">
</div>

And the CSS is:

.pagepix{line-height:0;-webkit-column-count:2;-webkit-column-gap:0;-moz-column-count:2;-moz-column-gap:0;column-count:2;column-gap:0}
.pagepix img{width:100%;height:auto}

I was wondering if there was any way of doing it so it has two small images, then one large image underneath.. example

image     |     image

  full width image  

image     |     image

  full width image

Does it make sense?

Upvotes: 1

Views: 1135

Answers (3)

UzendayoNE
UzendayoNE

Reputation: 161

I would reccomend using this CSS code and their respective classes on HTML:

div.pagepix div.half{ 
    width:48%; 
    float:left;
    padding: 1%; // Change this to margin if you don't want them to be smaller
}

div.pagepix div.full{
    width:98%;
    float: left;
    padding: 1%; // Change this to margin if you don't want them to be smaller
}

<div class="pagepix">
    <img class="half" alt="Testing 02" src="/images/thumbnail/image__xeKPEyHYPAnxsnKCWMKQ_1411534017.jpg">
    <img class="half"  alt="Testing 01" src="/images/thumbnail/image__uVfmzTwGzakmClDShyDA_1411533981.jpg">
    <img class="full"  alt="Testing 05" src="/images/thumbnail/image__WmLHwllUknhfDjocHqxn_1411533993.jpg">
</div>

You'll have some space between them and works fine.

Upvotes: 1

DimoMohit
DimoMohit

Reputation: 755

I am not sure whether Masonry is right choice for this but you ca n achieve it through CSS float:left OR you can use Bootstrap Grid OR Foundation Grid OR Masonry OR this example JSFiddle

Upvotes: 3

himanshu
himanshu

Reputation: 1797

from the question i think masonry is not necessary just make two class

.halfimg{ width:50%; float:left;}

.fullimg{ width:100%;}

<div class="pagepix">
  <img class="halfimg" alt="Testing 02" src="/images/thumbnail/image__xeKPEyHYPAnxsnKCWMKQ_1411534017.jpg">
  <img class="halfimg"  alt="Testing 01" src="/images/thumbnail/image__uVfmzTwGzakmClDShyDA_1411533981.jpg">
  <img class="fullimg"  alt="Testing 05" src="/images/thumbnail/image__WmLHwllUknhfDjocHqxn_1411533993.jpg">
</div>

Upvotes: 1

Related Questions