Susy: Setting A Fixed Gutter Width?

You can only achieve a fixed-width gutter on a fluid layout if you use padding for the gutters. That requires box-sizing: border-box which you can apply globally in Susy with the border-box-sizing mixin. Then you want to use inside-static for your gutter-position, and some value for column-width that can be used to calculate your gutters.

I realize the language here is a bit confusing. You have to set column-width, in order to get a gutter-width, and then you have to change the container setting if you still want a fluid container.

http://sassmeister.com/gist/7da95c41fff076dd7266

The gutters between items will always be twice as large as the edge padding — but you can add extra padding to the container without hurting anything.

Thanks, that is super helpful! BTW, was I right in my assumption that gutter-position: before is broken as illustrated by this? http://sassmeister.com/gist/94eeb234fc0965dc89c7

Nope. You need to use first instead of last if you have gutters before.

Boom! My mental model on this is getting better. Thanks again, closing this issue.

Opening this thread again sorry, but this really bugs me.

Let's assume I want a full-width grid of twelve columns.. I would write the following:

...
math: fluid,
columns: 12,
...

That's exactly what I want and I wish I don't have to change this behaviour/options.

Considering this, I would like to now set a margin to 20px.. Not one pixel more or less. How can I do this? Is it even possible to achieve without having to set a column width in pixels? As this is exactly what I don't want to do (setting a width in px)... Only pixels I want there are for the gutters.

Also this becomes even a bit more tricky if I would like to add breakpoints (10px for small devices and 20px for larger ones). How would I have to do? I simply can't figure this out, sorry if it sounds stupid.

Thanks

Yeah, this is a naming problem more than anything, and one of the first things I want to fix in v3. Yes, you have to set a column-width, but because you have math:fluid that will _not actually define the width of your columns_. Susy just uses the set column width to calculate gutters, even when it is not using that width to calculate columns. You will have to use gutter-position: inside-static if you want static gutters. Otherwise there is no way to get the math right. You simply can't do a fluid floated layout in CSS with static margins. It doesn't work. (You can do it with flexbox, and I recommend that if you're able).

These settings will give you fluid grids with 20px (padding) gutters:

math: fluid,
columns: 12,
column-width: 200px, // it really doesn't matter what number this is...
gutters: 20px/200px, // as long as you get this ratio right...
gutter-position: inside-static,

Sorry it's kinda ugly, I'm working on a better way.

I see. Thanks for these explanations! It make sense, I see where you're going. I suppose you kind of get to this kind of result: http://codepen.io/roydukkey/pen/eudsn

(found in this very interesting threat about that topic in css: http://stackoverflow.com/questions/7190768/css-fluid-columns-fixed-margins-the-holy-grail-of-holy-grails)

Also, althought I like your suggestion about flexbox, I'm always a bit uncomfortable to use it for layouts. The grid CSS property would be perfect in that case but its support isn't good enough for the moment unfortunately. Maybe I'll give flexbox a try anyway!

Many Thanks!

Since you mention flexbox, are there plans to support laying grids out using it in the near future?

I recall in another thread the question of"why flexbox?" is brought up. This is one really good reason, IMO.

For flexbox, see #583 (among several)

$susy: ( math: fluid, columns: 12, columns-width: 200px, gutter: 16px ('convert-units': 'rem') )

Hello, Miriam. Can I convert the value of gutter to rem / em units? If so, could you demonstrate by example how this can be done? If not, you could add this feature to the current or future versions, similar to accoutrement-scale. The code example showed above. Thank you in advance.

@maxinakenty I don't think that feature makes sense in the scope of this project. There are lots of tools (including accoutrement-scale) that will do it for you, and using them together is straight-forward:

$scale: (
  'gutter': 16px ('convert-units': 'rem'),
);

$susy: (
  'gutter': size('gutter'),
);

Miriam, thanks for the prompt reply. Most likely I have inaccurately formulated the question.
Now that I'm trying to install gutters: 1rem. Susy gives an error.
How can I set a fixed gutter, whose units of measurement will be in rem / em units?

I apologize. Tried to do this in Susy 3. Everything works well.

Hello @mirisuzanne !

Thank you for your expertise ! I manage to use a fix 50px gutter with that :

$susy : (
  math: fluid,
  columns: 12,
  column-width: 500px, // it really doesn't matter what number this is...
  gutters: 50px/500px, // as long as you get this ratio right...
  gutter-position: inside-static,
);

The problem here is that the first element has a 25px gutter on the left and the last element has a 25px gutter on the right. I would like to remove this as all my elements (those which take 100% for example) don't have a 25px left and right gutter so it makes a 25px shift between blocks. And it's the same if I create a grid inside of a another grid element, I'll have 2x25px on the left for the first element and 2x25px on the right for the last element... If I simply remove the left/right padding with first/last pseudo-element, the first and last column will be wider as it uses box-sizing:border-box...

Could you please help me ?
Thank you in advance !

Hi @cedriccharles4 - I can't think of a good way to make that happen in Susy, or even in CSS. It would take calc() values to get the internal content sizes matched, so you would have to do that manually. Off-hand, it's not even clear to me how that math would work.

If you just want alignment with the full-width elements, you could add gutters to them, rather than removing them from the Susy elements:

.full-width {
  @include gutters();
}

Also worth noting that inside (fluid or static) gutters make your grid-math simple, if you want to ditch Susy entirely. Spanning 3 of 12 would look like this:

.no-susy {
  float: left;
  width: percentage(3/12); // span 3 columns out of 12
  padding: 0 1em; // any gutters you want
}

Like I said, though - it doesn't totally solve your problem.