使响应式画廊HTML / CSS

Question

I'm trying to create a responsive gallery using HTML/CSS like in here:

Thats my HTML and CSS:

<div id="flow" class="container-fluid clear">
    <div id="photographies">
        {% for photo in photographies %}
            <div class="flow-photo {% if loop.index0 is odd %}odd{% endif %}">
                <a href="{{ path('photo', { id: photo.getId }) }}"><img id="{{ photo.getId }}" src="{{ photo.getImage }}"></a>
                <div class="info">
                    <div class="description">
                        <h1>{{ photo.getTitle }}</h1>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

#flow {background:#f1f1f1;padding: 0.5% 1%;}
.flow-photo {width:49.5%;float:left;margin:0.5% 0;}
.odd {margin-left:1%}
.flow-photo>a>img {width:100%;height:auto;border-radius:2px 2px 0 0;}
.info {background:#fff;border-radius:0 0 2px 2px;text-align:left;padding:7px}
.info h1 {margin:0;font-weight:700;font-size:11px;}

With this current code I'm getting next grid

The third div is not in the right place, because the first one is longer then second, so after second div there is a chaos.

If I add after every second div clear:both , I get this:

There are gaps, because some of divs are longer than others. That's not what I want.

What should I do to get responsive gallery like in my first picture?

Answer 1

You can create masonry layout with flexbox. Here is the example:

<div class="masonry-layout">
  <div class="masonry-layout__panel">
    <div class="masonry-layout__panel-content">
      <-- CONTENT HERE -->
    </div>
  </div>
  <div class="masonry-layout__panel">
    <div class="masonry-layout__panel-content">
      <-- CONTENT HERE -->
    </div>
  </div>
  <div class="masonry-layout__panel">
    <div class="masonry-layout__panel-content">
       <-- CONTENT HERE -->
    </div>
  </div>
  <-- FOLLOWING CONTENT PANELS -->
</div>

And here is the css, column-count is how much columns you will have, in your case that will be 2.

.masonry-layout {
  column-count: 2;
  column-gap: 0;
}
.masonry-layout__panel {
  break-inside: avoid;
  padding: 5px;
}
.masonry-layout__panel-content {
  padding: 10px;
  border-radius: 10px;
}

@media screen and (max-width: 600px) {
   .masonry-layout {
     column-count: 1;
     column-gap: 0;
   }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
   .masonry-layout {
     column-count: 2;
     column-gap: 0;
   }
}

Answer 2

Please see below code example. This contains text but you can replace this with images.

CSS and HTML code

 *, *:before, *:after { box-sizing: border-box !important; } article { -moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em; } section { display: inline-block; margin: 0.25rem; padding: 1rem; width: 100%; background: #efefef; } p { margin: 1rem 0; } /* styles for background color, etc; not necessary for this thing to work */ body { padding: 1em; font-family: "Garamond", serif; } h1 { font-size: 3rem; font-weight: 800; } body { line-height: 1.25; } p { text-align: left; } 

 <h1>Pure CSS Masonry</h1> <p>By using CSS3 columns, we can easily create a Masonry.js-like layout where random-height blocks fit together.</p> <article> <section> <p>Lorem ipsum dolor sit amet, consectetur.</p> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur.</p> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p> </section> <section> <p>Lorem ipsum dolor sit.</p> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p> </section> </article>