Masonry column not working

Hosting Support
1

Hi,

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

21
212850×1604 332 KB

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;
}
2

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

3

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?

4

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.

5

But i want something like this:

iFBSB1t

6

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

1024W resolution:

isnt
isnt1024×768 150 KB

1480W Resolution
isnt

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

7

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

13
132880×1800 351 KB

17
172880×1800 472 KB

8

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

Result:

isnt
isnt1024×768 133 KB

9

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.

10

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

11

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

41
412880×1574 440 KB

12

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).

Capture4
Capture41434×818 79.9 KB

13

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?

14

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

Or you can do this Seamless Responsive Photo Grid | CSS-Tricks - CSS-Tricks
and adjust the gaps between images later…