aligning of 5 boxes using flex is giving spacing issue

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>

Hi @tony_92. CSS new features like flexbox and CSS grid are not supported in IE browser. Any particular reason u want it for IE? One solution would be using floats — Rohan Shenoy, Jan 21 '21 at 07:31
Hi @RohanShenoy, actually in chrome also while using flexbox last 2 elements getting space since i've used space-around but i want to have 5 boxes 3 on top 2 on below leaving last box empty — tony_92, Jan 21 '21 at 07:43
I suggest you to use bootstrap, it will give you the desired behavior. — Mhd Alaa Alhaj, Jan 21 '21 at 08:18
@tony_92. Got it. Please try my solution. If thats not what ur looking for please let me know and I will update it — Rohan Shenoy, Jan 21 '21 at 09:51

score 0 · Answer 1 · answered Jan 21 '21 at 09:16

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;
        }
      }

Rohan Shenoy · Answer 2 · 2021-01-21T11:41:35.210

0

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%; 
}

edited Jan 21 '21 at 11:41

answered Jan 21 '21 at 09:53

Rohan Shenoy

805
10
23

Hi @Rohan-shenoy i tried the same. but it's not giving the thing – tony_92 Jan 21 '21 at 12:54
Hi @tony_92. Please access this demo link : https://codepen.io/rohanshenoy96/pen/dypLWre – Rohan Shenoy Jan 22 '21 at 10:21

aligning of 5 boxes using flex is giving spacing issue

2 Answers2