Grid layout with items in different sizes - html

Question

I'm stuck with one problem I don't know how to solve.
I have a grid system with 18 items/boxes in the same size. I need to delete 4 items/boxes and make one big item/box of it.
Please check wireframe below. This is how I want it to look :)
.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>
( grid item + grid content x 18 )

Answer 1

You can do something like this with the Grid, which is ideal for this type of a task:
* {box-sizing: border-box}
.grid_big {
display: grid;
grid-template: repeat(3, 1fr) / repeat(6, 1fr); /* grid-template-rows / grid-template-columns */
grid-gap: 10px; /* grid-row-gap / grid-column-gap */
}
/* grab the 7th one and make it span 2 rows & columns */
.grid_item:nth-child(7){
grid-row: span 2;
grid-column: span 2;
}
img {
display: block; /* removes bottom margin/whitespace */
width: 100%;
border: 1px solid;
}
<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="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="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="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="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="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="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="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="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="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="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="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="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="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="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
</div>

Answer 2

Grid (grid-template-areas) might solve your problem.