I created this image gallery using column-count and it works great in Chrome and most other browsers. But in Safari there is this weird bug: the image container starts at the previews column end and spans to the start of the next column. But the image is only in the second part of the container. Any idea how to fix that?
.image-gallery {
border: 1px solid red;
margin: 0;
padding: 0;
line-height: 0 !important;
column-count: 4;
-webkit-column-count: 4;
}
The gallery is created dynamically so I can't use flex and group images into divs for each column. I also don't want to use grid, as not all the images have the same aspect ratio and I don't want uneven spaces between the images.
The short answer is to add .image-item { break-inside: avoid-column; }.
But I would probably simplify the markup a bit using a list instead (list items ought not to overflow columns).
ul {
outline: 1px solid red;
list-style: none;
margin: 0;
padding: 0;
column-count: 4;
column-gap: 1rem;
}
li {
/* not needed for display: list-item elements
... just belts and braces */
break-inside: avoid-column;
}
li:not(:last-of-type) {
margin-bottom: 1rem;
}
a {
display: block;
position: relative;
}
a:hover::after {
/* show text from title attribute */
content: attr(title);
position: absolute;
display: block;
inset: 0;
padding: 1rem;
background: #162912c3;
color: #fff;
}
img {
display: block;
width: 100%;
}<ul>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/gitter/" title="Gitter">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/Korbfenstergitter-portfolio-1018x1024.jpg" alt="Gitter" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/konstruktionen/" title="Konstruktionen">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/Portfolio_Konstruktionen.jpg" alt="Konstruktionen" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/geschenkartikel/" title="Geschenkartikel">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/geschenkartikel-1-681x1024.jpg" alt="Geschenkartikel" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/wandbilder/" title="Wandbilder">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/wandbilder-4-1024x717.jpg" alt="Wandbilder" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/grabkreuze/" title="Grabkreuze">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/grabsteine-1-681x1024.jpg" alt="Grabkreuze" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/glastisch/" title="Glastisch">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/glastisch-1-1024x681.jpg" alt="Glastisch" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/ausleger/" title="Ausleger">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/ausleger-produkte-1-1024x682.jpg" alt="Ausleger" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/unterstaende/" title="Unterstände">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/velounterstaende-1-1024x681.jpg" alt="Unterstände" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/tore/" title="Tore">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/09-Kopie.jpg" alt="Tore" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/vordaecher-2/" title="Vordächer">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/Portfolio_Vordaecher.jpg" alt="Vordächer" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/gelaender/" title="Geländer">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/kellergelaender-8-1024x681.jpg" alt="Geländer" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/hornussermaterial/" title="Hornussermaterial">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/IMG-20220302-WA0004.jpg" alt="Hornussermaterial" />
</a>
</li>
<li>
<a href="https://php81.kunstschlosserei-jogi.ch/produkte/sonstiges/" title="Sonstiges">
<img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/sonstiges-2-681x1024.jpg" alt="Sonstiges" />
</a>
</li>
</ul>