CSS Masonry type Image layout responsive

Question

I need to create a responsive Masonry images layout but there are 2 large sections which are going to make it very tricky?

See the attached image:

How can I get something like that but responsive?

in masonry it will take care, and the big image will adjust in available area... — mahendra rajeshirke, Oct 16 '15 at 09:27

Skif · Accepted Answer · 2015-10-16T10:11:38.380

1

You may try to use columns to achieve this.

HTML

<section id="photos">
  <img src="images/image-1.jpg" alt="Some Image">
  <img src="images/image-2.jpg" alt="Another Image">
  ...
</section>

CSS

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 3;
  -webkit-column-gap:   10px;
  -moz-column-count:    3;
  -moz-column-gap:      10px;
  column-count:         3;
  column-gap:           10px;  
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

And some media queries CSS

@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
 }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
 }
}

Here is more info in this article Seamless Responsive Photo Grid

edited Oct 16 '15 at 10:11

answered Oct 16 '15 at 09:28

Skif

41
4

Thank you for the usefull comment. – Skif Oct 16 '15 at 10:13
This large cell that goes across 2 is my main problem – Nutz24 Oct 16 '15 at 11:51
Look at the image provided. I need that layout – Nutz24 Oct 16 '15 at 16:04

score 0 · Answer 2 · edited May 23 '17 at 12:03

Consider using a framework like Bootstrap. It's grid system makes responsive, column-based layouts easy to create.

You'll have to mess around a little bit for equal heights though.

Here's a jsFiddle with the basic idea (try resizing the viewport to see how it behaves on lower resolutions):

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="content">a</div>
        </div>
        <div class="col-md-4">
            <div class="content">a</div>
        </div>
        <div class="col-md-4">
            <div class="content">a</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="content">a</div>
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-12">
                    <div class="content">a</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="content">a</div>
                </div>
                <div class="col-md-6">
                    <div class="content">a</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row"></div>
</div>

SO does not program your code. SO points you in the right direction. — Adrenaxus, Oct 19 '15 at 06:26
I'm not asking anyone to do it all for me. I'm just saying I've got issues with the long one across ... the other stuff I know how to do. — Nutz24, Oct 19 '15 at 09:21

CSS Masonry type Image layout responsive

2 Answers2