aligning of 5 boxes using flex is giving spacing issue - html

Question

I've been working with grid layout, it's working fine in all browsers except in IE
Issue with grid layout in IE11
Now i've been trying the same structure with flex 3 cols * 2 rows but somehow it is not getting as expected because of spaces for the last 2 boxes.
Hope you can help me out with your suggestions either in the grid issue Issue with grid layout in IE11
or with the flex
.grid_container{
margin: 10px auto;
max-width: 1100px;
width: 100%;
height: auto;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
justify-content: space-around;
flex-flow: wrap;
}
.box-item {
width: 30%;
height: auto;
position: relative;
}
.box-item img {
max-width: 100%;
max-height: 100%;
vertical-align: bottom;
min-height: 200px;
}
.box-text {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.3rem;
font-weight: 400;
color: white;
}
#media only screen and (max-width: 1200px) {
.box-item {
width: 45%;
}
}
#media only screen and (max-width: 1200px) {
.box-item {
width: 90%;
}
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 320px) {
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-width: 320px) and (max-width: 479px) {
}
#media only screen and (max-width: 767px) {
}
/* Tablets potrait----------- */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Tablets (portrait and landscape) ----------- */
#media only screen and (min-width: 768px) and (max-width: 1024px) {
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
}
/*--------#media only screen and (min-width: 992px){ } ----------- */
/* Desktops and laptops ----------- */
#media only screen and (min-width: 1224px) {
}
/* Desktops and laptops ----------- */
#media only screen and (min-width: 1400px) {
}
<div class="grid_container">
<div class="box-item">
<img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
<div class="box-text">
dummy text
</div>
</div>
<div class="box-item">
<img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
<div class="box-text">
dummy text
</div>
</div>
<div class="box-item">
<img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
<div class="box-text">
dummy text
</div>
</div>
<div class="box-item">
<img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
<div class="box-text">
dummy text
</div>
</div>
<div class="box-item">
<img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
<div class="box-text">
dummy text
</div>
</div>
</div>

Answer 1

You may add this to the css which mimics flex display fo IE:
_:-ms-lang(x),
.ie10up {
/* IE10+ CSS styles go here */
.grid_container {
margin: 10px auto;
max-width: 1100px;
width: 100%;
height: auto;
display: inline-table;
}
.box-item {
position: relative;
display: inline;
text-align: center;
}
}

Answer 2

Add the following code to your exiting one. Please update the width to take 1/3 of total width. Also add max-width so that it doesn't exceed that width.
.box-item {
width: 33%;
max-width: 33%;
}