0

The gallery looks like this:

It has that undesirable spacing. Here is an example of what I'm trying to achieve: https://codepen.io/LilyAnne56/details/jOvqgZp They used three div tags in the html. I have PHP code that has images uploaded from a database, so I'm not sure how I would code this in the php.

Here is CSS:

container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: center;
margin: 20px 20px 0 1px;
}

.container .box .dream{

display: row;

width: auto;
}

.container .box .dream img {
 width: 300px;
 height: auto;
 margin-right: 15px;
 margin-bottom: 15px;
 border-radius: 5px;
 vertical-align: top;
 }

When I tried using grid, it made the images distorted. I tried a few other tutorials from Youtube that made a nice dynamic gallery, but the images lost their original dimensions. Since this is eventually for a photography shop, I really want to keep the original image sizing or close enough. I found ways to make it look similar to this gallery using nth child() selector, but each row was set to a size, and since some of the images are taller and some more wide it wasn't ideal.

Is it something I should add/change to the php?

Lilibet
  • 1
  • 1

1 Answers1

-1

Masonry layout is currently a proposed addition to CSS, but until it is supported you have to rely on more primitive methods to achieve this kind of layout.

One such method would be to use absolute positioning, using Javascript to calculate the location of each photo based on its size, and position it accordingly. There are libraries available which can do the heavy lifting for you.

If you don’t need the images to appear in any particular sequence, a very easy solution would be to use CSS columns. Have a look at this snippet to see how it works. As you can see, the layout sequence is top to bottom in column 1, then top to bottom in column 2, then top to bottom in column 3. But CSS does balance the columns for you so that they are approximately the same length.

document.querySelectorAll('.cols>div').forEach(e => {
  /* set a random background color */
  e.style.backgroundColor = 'hsl(' + Math.floor(Math.random()*360).toString() + ',100%,50%)'
  /* set a random height between 2em and 6em */
  e.style.height = Math.floor(2 + Math.random()*4).toString() + 'em'
})
.cols {
  columns: 3;
  color: white;
}

.cols>div {
  border: 1px solid black;
  margin-bottom: 1em;
  padding: 1em;
  border-radius: 4px;
  break-inside: avoid;
}
<div class="cols">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
</div>
Brett Donald
  • 6,745
  • 4
  • 23
  • 51