[how-to?] Set height == to tallest of many (equalize columns)

[OClement]

Hi, I was creating a few demos to show and test GSS's capabilities and started recreating the Holy Grail Layout, and bumped into this use case:

You have 3 columns with varying content's height You want the 3 columns to have the same height This height should be equals to the height of the tallest column

How would one go about this?

[paulyoung]

Here's one way to do it: http://codepen.io/paulyoung/pen/xbmYeq?editors=110

[OClement]

Thanks @paulyoung Doesn't seem to work for me; the three columns don't have the same height in that codepen

[Inviz]

It's not hard to make three columns the same height initially by binding some variable to be more than computed-height property of each column. And then assigning that height to columns..

But it's a bit more involved to make it shrink back (when window is resized or there becomes less content) - you'll need wrapper for each column. Measure the inner element, and set height on the outer element.

Shrinking elements to content is the worst case for JS/CSS layout engines.

[OClement]

@Inviz Thanks for your reply I'm not sure I see exactly what you mean I did try something along the lines of what you describe, but without success

It was something similar to this plunk

It's pretty messy actually :/

Thanks

[Inviz]

http://plnkr.co/edit/bWcELtHiXutAL60yL9Pa?p=preview

Sorry for wrappers :)

[OClement]

@Inviz Thanks!

Could you explain what's going on here exactly?

@h |(nav)-(main)-(aside)| in(::window) gap($gap) {
  height: >= .wrapper[intrinsic-height] !weak;
  height: == shared-height;
}

I've never seen a block/"ruleset" used alongside VFL in the doc (is it documented somewhere?)

Thanks again!

[paulyoung]

@OClement see http://gridstylesheets.org/guides/vfl/#rulesets

[OClement]

@paulyoung I completely missed that... O_o

Well, thank again to both of you!

Edit: Just a heads up I know it's a development branch and inconsistencies are expected, but this method is broken in 2.1.x See Forked Plunk

Using

<script src="http://rawgit.com/gss/engine/2.1.x/dist/gss.js"></script>

[Inviz]

Thanks, man. Not sure what happens there, but it seems to work on latest version ranges2 (i'm not proud for the unreleased work, but we're just busy with stuff)

http://rawgit.com/gss/document/ranges2/dist/gss.document.parser.js http://plnkr.co/edit/rHq5GlRQmYI3d7sMvhBZ?p=preview