Masonry column not working

Hi,

I’m building a portfolio website and i want to make a masonry with my thumbnails.

I made a masonry with 3 columns but it is only 2 columns wide. Can someone help?

html:

<div class="masonry-wrapper">
            <div class="masonry">
              <div class="masonry-item">
                <img src="Assets/mockup.jpg" alt="Project" class="masonry-content">
              </div>
              <div class="masonry-item">
                <img src="Assets/magazine.jpg" alt="Magazine" class="masonry-content">
              </div>
              <div class="masonry-item">
                <img src="Assets/Animatie.jpg" alt="Animatie" class="masonry-content">
              </div>
              <div class="masonry-item">
                <img src="Assets/stob.png" alt="STOB" class="masonry-content">
              </div>

            </div>
         </div>

css:

*,
*:before,
*:after {
  box-sizing: inherit;
}

.wrapper { 
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  padding: 1.5em;
}

.masonry-wrapper {
  padding: 1.5em;
  max-width: px;
  margin-right: 0;
  margin-left: 0;
}
.masonry {
  columns: 3;
  column-gap: 10px;
}
.masonry-item {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {  .masonry {
    columns: 3;
  }
}
@media only screen and (min-width: 1024px) {
  .masonry {
    columns: 3;
  }
}
.masonry-item, .masonry-content {
  border-radius: 4px;
  overflow: hidden;
}

which one is the third column? Please specify which image. You can use tables as well if you want to.

The order of the images in html is top left (project), bottom left (magazine), top right (animatie), bottom right (STOB).
What do u mean with using tables?

With tables you can make as many columns as want, and rows. Syntax is like this.

<table>
<tbody> <!-- The tbody isn't exactly nescessary-->
<tr>   <!-- This tag is a row-->
<td>  <!-- This tag is a column-->
Insert something here.
</td>
</tr>
</tbody>
</table>

Although there is some problem with accesibility readers, or screen readers.

But i want something like this:

iFBSB1t

Because your device screen isn’t big enough to show 3 columns. And your pics are a bit big too.

1024W resolution:

1480W Resolution
isnt

You should make images a bit smaller or Flexible with screen width.

2 Likes

But if i make them smaller they still don’t fit. When i zoom out to 50% they fit


You should set width of images to 100% and widths of zoom1,zoom2 and zoom3 to 30%.

Result:

Oh, you’re looking to my online website. That is the version without the masonry thing. I’m now working in brackets because i want a second row that is connecting to the first row. I uploaded the version i’m working on online.

I see that you are using grid layout. See the Mozilla Documentation.

2 Likes

Oke, that is working. But how do i get it to ‘connect’ to the image above it? Like this:

You will need to identify which row is it, then adjust the css code to put it there. Firefox inspector can help with this. They have built tools for this to show the grid lines.
grid-template-columns: (insert three values here, to make three columns
The trick is to put that image right after the third image. (In the code) Then, keep everything thing the same and the image should wrap around to the other side and go there. This screenshot might help (this is an example, which I edited after exprimenting with mozilla code).

Oke, i feel so dumb but i don’t get it to work. I tried a lot of things and searched the whole internet…

html:

<div class="grid">           
            <div class="trans">
                <a href="project.html"><img src="Assets/mockup.jpg" alt="Project" class="masonry-content" style="max-width: 100%;height:auto;"></a>
            </div>
            <div class="trans">
                <a href="magazine.html"><img src="Assets/magazine.jpg" alt="Magazine" class="masonry-content" style="max-width: 100%;height:auto;"></a>
            </div>
            <div class="trans">
                <a href="animatie.html"><img src="Assets/Animatie.jpg" alt="Animatie" class="masonry-content" style="max-width: 100%;height:auto;"></a>
            </div>
            <div class="trans">
                <a href="stob.html"><img src="Assets/stob.png" alt="STOB" class="masonry-content" style="max-width: 100%;height:auto;"></a>
            </div>
         </div>

css:

.grid{
    display: grid;
    grid-column-gap: 5%;
    grid-row-gap: 5%;
    grid-template-columns: repeat(3, 30%)
}

.grid img{
    border-radius: 7px;
    border: 5px solid #f9ccc7;
    overflow: hidden;
    border-radius: 7px;
}

Can someone explain what to do according to my html and css?

if you want Masonry then you need to include masonry.js !!!
and follow all instructions (just scroll) https://masonry.desandro.com/

Also look at the source of the demo you are chose at the beginning of the topic,
you’ll see CSS’s and also at the bottom many JS’s
https://tympanus.net/Development/GridLoadingEffects/index2.html

Or you can do this https://css-tricks.com/seamless-responsive-photo-grid/
and adjust the gaps between images later…

3 Likes