I am attempting to design a unique mosaic layout using flexbox that resembles the image provided:
https://i.sstatic.net/jrHvb.jpg
Each box should have a width equivalent to one-third of the parent container, except for box 4 which needs to be double the size in height and width.
I have made progress with the following code snippet:
#push-group-element ul,
#push-group-element ul li{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex: 1 0 33.33%;
justify-content: center;
}
.mosaic-container {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
list-style-type: none;
background: red;
flex-wrap: wrap;
}
.mosaic-item {
position: relative;
padding: 10px;
background: green;
outline: 1px solid black;
}
.mosaic-item {
height: 150px;
}
#push-group-element .mosaic-item:nth-child(4) {
flex: 1 0 66.6%;
height: 300px;
}<div id="push-group-element" style="width:600px">
<ul class="mosaic-container">
<li class="mosaic-item item-small" data-item="1">1</li>
<li class="mosaic-item item-small" data-item="2">2</li>
<li class="mosaic-item item-small" data-item="3">3</li>
<li class="mosaic-item item-big" data-item="4">4</li>
<li class="mosaic-item item-small" data-item="5">5</li>
<li class="mosaic-item item-small" data-item="6">6</li>
<li class="mosaic-item item-small" data-item="7">7</li>
<li class="mosaic-item item-small" data-item="8">8</li>
<li class="mosaic-item item-small" data-item="8">9</li>
</ul>
</div>The issue I'm facing is that box number 6 does not wrap properly and ends up on a new line, resulting in an unwanted row with box 9 and an empty space where box 6 should be located.
In summary: How can I ensure that box 6 wraps below number 5 while maintaining boxes 7, 8, and 9 in the same row as per the attached sketch. Thank you in advance.