I'm currently trying to implement masonry layout using the CSS property column-count. While I am aware that there are simpler solutions involving creating multiple columns for the masonry structure, the complexity of my project built on PHP Laravel limits me to using only column-count in CSS for displaying images.
The specific issue I am encountering is depicted in the following screenshot: https://i.sstatic.net/dPeSA.png
Due to column-count: 3, the position: absolute element (represented by the cross button) appears partially in the previous column. I have attempted to resolve this issue with the following CSS properties:
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
However, these adjustments do not seem to rectify the problem.
Here is a snippet of the relevant CSS and HTML code:
<div class="card-columns">
@if ($gallery_images->isNotEmpty())
@foreach ($gallery_images as $gallery)
<div class="card">
<img class="card-img-top" src="{{ $gallery->url }}">
<div class="card-img-overlay">
<a class="preview-remove-btn" href="{{ route('delete_gallery_image',$gallery->id) }}">
@if(Auth::user()->user_type_id != 3)
<i class="mdi mdi-close-circle preview-remove-btn-icon"></i>
@endif
</a>
</div>
</div>
@endforeach
@endif
</div>
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
@media (min-width: 576px)
.card-columns {
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
orphans: 1;
widows: 1;
}
@media (min-width: 576px)
.card-columns .card {
display: inline-block;
width: 100%;
}
.card-columns .card {
margin-bottom: 24px;
}
.card-img, .card-img-top, .card-img-bottom {
flex-shrink: 0;
width: 100%;
}
.preview-remove-btn {
position: absolute;
width: 10px;
height: 10px;
top: -16px;
right: -2px;
font-size: 18px;
}