CODEWITHSUNDEEP
htmlcssimageimage-gallery
jAC
jAC

Reputation: 3435

CSS images not aligning properly leaving empty spaces

I am not sure how to explain this at all other than showing the problem. I have the following code:

#photoBox {
    -webkit-column-count: 4;
    -moz-column-count:    4;
    column-count:         4;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}
#photoBox img{
    width: 100% !important;
    height: auto !important;
    display: block;
}
#photoBox .photo{
    position: relative;
    float: left;
    box-shadow:       
        0px 0px 0px 2px rgba(0,0,0,0.6),
        0px 0px 0px 14px #fff,
        0px 0px 0px 18px rgba(0,0,0,0.2),
        6px 6px 8px 17px #555;
    margin: 25px;    
}
#photoBox .title {
    position: absolute;
    background-color:rgba(255,255,255,0.7);
    color: #000;
    text-align: center;
    font-weight: bold;
    width: 100% !important;
    bottom: 0;
}

I get the following results:

enter image description here

What i would like to get is the images to "fill in all the spaces"

Like so: enter image description here

I was able to do this in the second screen using a mess of tricks that will not allow me to use my current styling to work at all.

Can someone guide me with what i am doing wrong with this CSS to get my desired results?

Thanks! JAC

Upvotes: 0

Views: 81

Answers (1)

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

Use masonry jquery library to handle the problem:

  1. Include masonry

    script src="/path/to/masonry.pkgd.min.js"

2.If you have the following html:

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

3.Then your script should be like:

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 200
});

4.And the CSS:

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

Upvotes: 1

Related Questions