Flexbox offers great advantages and with its modern syntax it can speed up a developer’s workflow but it has a few hangups. Its support for older browsers including IE is below 70% of its Global usage, meaning your grids may not show up properly or at all on older devices. Modern browsers don’t have these same issues (chrome, firefox) however to keep this nightmare from happening on older devices and browsers, let’s go over a few tips to avoid broken grids on older devices.

Build your own grid using Percentages

Due to the nature of floats, and display inline being supported early in IE, your grid will always be showing up properly. Use traditional basic CSS and Flexbox will not become a roadblock for your users.

.box {
  width: 100%;
  margin: auto;
  overflow: hidden;
}
div[class^="grid_"] {
  display: inline;
  float: left;
}
.grid_one {
  width: 6.333333333333332%;
}
.grid_two {
  width: 14.666666666666666%;
}
.grid_three {
  width: 23%;
}
.grid_four {
  width: 31.33333333333333%;
}
.grid_five {
  width: 39.666666666666664%;
}
.grid_six {
  width: 48%;
}
.grid_seven {
  width: 56.333333333333336%;
}
.grid_eight {
  width: 64.66666666666666%;
}
.grid_nine {
  width: 73%;
}
.grid_ten {
  width: 81.33333333333333%;
}
.grid_eleven {
  width: 89.66666666666666%;
}
.grid_twelve {
  width: 98%;
}

You can then wrap your grid column divs within the main div to get a full one to twelve column grid.

<div class="box">
  <div class="grid_one">
   <h1>sample</h1>
  </div>
</div>

#grid-layout #flexbox #grid #css