Firstly, as per my comment, I'm not sure whether it's a good idea to have the widths of the grids themselves vary periodically, and automatically, from a user point of view. Secondly, if this can be solved with just CSS, as long as the CSS is maintainable and clear, I would avoid using Javascript for styling.
So...
You don't seem too definite on what you mean by "pretty", but one way to achieve, if not pretty-ness, but neatness, is to ensure spacing between elements is constant (specified in px), but the element widths can be a bit responsive (to browser width, essentially)
There are CSS grid systems that can do this (e.g. Twitter Bootstrap), but if you're targeting modern browsers, then using CSS flexboxes can give a way of doing this with a minimum of code and not additional dependencies.
If you have your HTML structure as simple as it can be:
<div class="window">
<div class="master">
<p>Master</p>
</div>
<div class="detail">
<p>Detail</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tellus nisl, tristique a nisi sed, facilisis suscipit ligula. Ut lectus arcu, mollis sit amet faucibus in, hendrerit ac nisl.</p>
</div>
</div>
Then the CSS to achieve a simple 2 column layout (which is essentially what you're asking for the description above is quite short, using display: flex
and the usual width
property.
/* Layout */
.window {
display: -webkit-flex; /* Safari */
display: flex;
}
.master {
width: 25%;
}
.detail {
width: 75%;
}
/* Spacing */
.window, .master, .detail {
padding: 20px;
}
.detail {
margin-left: 20px;
}
You can see a demo of this. One nice benefit is that the default behaviour of the flexbox model is that each of the children (in this case .master
and .detail
) is that they end up equal height, the height of the tallest one of the 2.
For integrating with ngGrid
, there isn't really much to do. The only thing would be to give the master/detail containers themselves display: flex
, so they are also a parent flex container to the ngGrid
instances. The gives the ngGrid
instances the default behaviour of having their height equal to the height of their flex parent.
You can see a demo of the flexbox integrated with ngGrid
.