I have encountered a challenge that I cannot seem to overcome.
In my grid system, there are 18 identical items/boxes. I am looking to remove 4 of those items/boxes and combine them into one large item/box.
Refer to the wireframe below for guidance on how I envision the final result:
.grid_big {
margin-bottom: 200px;
}
.grid_big .grid_item {
width: 16.6%;
display: inline-block;
float: left;
}
.grid_big .grid_item img {
width: 100%;
border: 1px solid;
/* visibility: hidden; */
}
.grid_big .grid_item .grid_content {
margin: 20px;
}<div class="grid_big">
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="fixfloat"></div>
</div>( total: grid item + grid content x 18 )