Search code examples
csssassgridsusy

Susy - get static span width in fluid container


I'm building a website using susy fluid grid container. But some of my interface elements require fixed width. So having these settings:

$susy: (
  columns: 12,
  container: rem-calc(1680),
  gutters: 28px/112px,
  global-box-sizing: border-box,
  gutter-position: split
);

I would like to easly get for example 8 column span, but staticly. So @include span(8 of 12) would result with precentage value, which is fine, but in certain cases I'd like to get the static value (based on container fixed max width ofcourse).

Is it possible?


Solution

  • In your susy global settings above you can add:

    math: static
    

    But in order to do so you need to include the column-width object as well.

    So let's say you want to have each column with 40px width, using your example it goes like this:

    $susy: (
      columns: 12,
      ...
      math: static,
      column-width: 40px
    );
    

    When you do @include span instead of using % basis, it will use px base which as you want it as static.