My attempt to create a gallery layout with two larger blocks amidst smaller blocks is not functioning correctly. The large block is overlapping the two smaller blocks below it.
Is there a way to prevent block overlapping using CSS? I have searched Stack Overflow for similar code examples or issues, but couldn't find any.
.gallery-grid {
margin: 0 auto;
padding: 30px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.gallery-grid .image-responsive {
width: 100%;
}
.gallery-grid .cell {
margin: 10px 10px;
width: 110px;
height: 110px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.gallery-grid .cell.big {
flex: 0 240px;
}<div class="gallery-grid">
<div class="row"></div>
<div class="cell ">
<img src="http://placehold.it/110x110" class="image-responsive">
</div>
<div class="cell ">
<img src="http://placehold.it/110x110" class="image-responsive">
</div>
<div class="cell big">
<img src="http://placehold.it/110x110" class="image-responsive">
</div>
<div class="cell">
<img src="http://placehold.it/110x110" class="image-responsive">
</div>
...more image tags...
</div>The two red marked blocks should not be overlapped. https://i.stack.imgur.com/5UJdx.png