Menu icon Foundation
Different height columns break grid?

I want to have 4 columns across on large screen, then transition to two columns on medium. This works fine if each of the columns have a similar height, however, if one of the columns has a dramatically different height, things break on the medium screen size.

How is this best handled? Ideally, the content would always be similar in height, but its dynamic so I can't count on that.

Example here:
http://codepen.io/anon/pen/wavPOo

grid

I want to have 4 columns across on large screen, then transition to two columns on medium. This works fine if each of the columns have a similar height, however, if one of the columns has a dramatically different height, things break on the medium screen size.

How is this best handled? Ideally, the content would always be similar in height, but its dynamic so I can't count on that.

Example here:
http://codepen.io/anon/pen/wavPOo

Hackdorte about 4 years ago
Rafi Benkual about 4 years ago

Jeremy - I've actually never seen that before. On the the codepen hack added that I modified, it works fine: http://codepen.io/rafibomb/pen/NqWLda

I would use a block-grid in this case http://codepen.io/rafibomb/pen/pJoOeK

Jeremy Englert about 4 years ago

I tried using Equalizer to solve this, but when it gets down to the "medium" screen size, the heights automatically switch back to "inherit" instead of staying equal.

Any ideas?

Rafi Benkual about 4 years ago

Not sure if you saw my comment, but block grid would take care of this for you.