Add a function for getting a column measure in pixels

[callumlocke]

Sometimes I just need to know the pixel width of a given number of columns (eg. to use in some custom hack or calculation). It's hard to get this info.

eg. what is the width of 5 columns (inc. interior gutters) on the M layout? Or what is the the full 12-column width on the L layout? I'd like to add a function for this:

oGridMeasure(M, 5) // returns 240px

oGridMeasure(L, 12) // returns 940px

(There is the oGridColspan() function, but this returns a percentage, which isn't always usable.)

It could look something like this:

@function oGridMeasure($layout-name, $columns, $gutters: auto) {
  @if $gutters == auto { $gutters: $columns - 1; }

  @return (
    ($columns * _oGridColumnWidth($layout-name)) +
    ($gutters * oGridGutter($layout-name))
  );
}

notes:

• snappy-only – it should probably throw an error if you specify a non-snappy layout like S (because only snappy layouts can have a straight answer for "how wide is X columns").
• this would be provided just as a low-level helper for hacks etc; obviously it's better in most cases to use the high-level mixins

Happy to do a PR for this if agreed.

[AlbertoElias]

o-grid is already quite complex, and I'm wary of adding more things to it, specially if it's for hacks. Are there more use cases for it?

[callumlocke]

When I say "hacks", I don't mean weird CSS hacks, I just mean anything that o-grid can't do. Pretty much any time you want to align something visually with the page grid, but when o-grid doesn't provide a suitable mixin. Sometimes you just need a pixel value.

Example: say you've got a div that's a grid element (data-o-grid-colspan="M: 4"), and then you want to style the layout of the inner elements inside it... You can't easily nest grids, so you need to do custom styling for that inner layout. If you want your custom measurements to align nicely with the page's grid, you need to be able to get pixel values.

[gvonkoss]

Closing this, as it can be solved with CSS grid for individual products now.