Fixed width column in a singularity grid?

Question

Let's say I have three divs: a, b and c, that share a common wrapper div and that I'd like to align as a triptych.

Is it possible to have either b or c have a fixed width (imagine a sidebar with nav), while the other two expand fluidly? Note that the source order matters (a, b, c order). A max-width (rather than fixed) could work fine as well, as long as it supports fluid expansion of the other two divs.

Answer 1

Yes you can! Check out this SassMeister showing fixed and fluid columns.

Now, there are a couple of caveats to this. First, you need fixed width gutters as you can't have gutters in proportion to fluid columns if not all columns are fluid. Second, you need to be using the calc output style from Singularity Extras. This means your columns will be output using CSS3's calc that, while widely available, does require a fallback for browsers that do not support it. Other than that, the calc output style works exactly like the isolation output style.

Last year when the calc output style was introduced, I wrote a blog post titled Bulletproof Combo Fixed and Fluid Grids with CSS Calc explaining in detail about using calc to create fixed and fluid grids and introducing it to Singularity.