Equalize your responsive grids

I’ve been looking for some time for the perfect solution to creating Bootstrap grids that have the same column-height for every “cell” in the grid, within the same row. I’ve found a few possible solutions, but none of them allow all the following:

  1. Must not have explicitly-defined number of items per row (needs to be flexible and properly wrap on any screen size)
  2. Compatible with IE 9 (sorry, flexbox)
  3. Not break the responsiveness of the grid (this is the problem with Bootstrap’s suggested solution)

So I’ve settled on a jQuery plugin that handles it nicely. I’d like to do this with pure CSS, but this works for now. (If you know how, please share!)

Back to posts