The problem

By default in many css grid systems, the boxes height depends on there content. For many reasons, it can be a problem.

For example, with the grid system I created (Z-GRID) (emmet code):

.z-grid>.z-2*4>.z-box
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, accusantium, possimus vero harum hic libero consectetur debitis nam ratione fugit porro fuga vitae quibusdam reprehenderit eum sapiente similique delectus dignissimos?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repudiandae odio et.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repudiandae odio et.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, accusantium, possimus vero harum hic libero consectetur debitis nam ratione fugit porro fuga vitae quibusdam reprehenderit eum sapiente similique delectus dignissimos?

The solution

So, I decided to solve the problem with a little js (jQuery) script. You just have to download the script, declare it in the html and add the "equalheight" classe on each box.

For example, with Z-GRID (emmet code):

.z-grid>.z-2*4>.z-box.equalheight
All boxes must be vertically aligned by their top side. It is done by default in Z-GRID.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, accusantium, possimus vero harum hic libero consectetur debitis nam ratione fugit porro fuga vitae quibusdam reprehenderit eum sapiente similique delectus dignissimos?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repudiandae odio et.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repudiandae odio et.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, accusantium, possimus vero harum hic libero consectetur debitis nam ratione fugit porro fuga vitae quibusdam reprehenderit eum sapiente similique delectus dignissimos?

There are 2 automatic actions and you can do a manual action too:

Automatic #1

The grid is automatically resized when the entire document is loaded.

Automatic #2

The grid is automatically resized when the window is resized.

Manual

You can call the function when you want in your javascript code. (it has been attached on the window)

equalheight()