CODEWITHSUNDEEP
gridsasssusy-compass
Undistraction
Undistraction

Reputation: 43401

Using Susy Next How Do I Create A Grid With Fluid Columns With Fixed Gutters

How do I set up a grid with fluid columns and fixed gutters using Susy Next?

It looks like Gutter Position is the way to go, offering two settings that use padding for the gutters See Docs:

inside
Gutters are added as padding on both sides of a layout element, and are not removed at the edges of the grid.

inside-static
Gutters are added as static padding on both sides of a layout element, even in a fluid layout context, and are not removed at the edges of the grid.

However, I've had no success using it. There is no mention of how it should be used in the Docs so far as I can see, so it seemed logical that the following would work:

$default-layout: (
  global-box-sizing: border-box,
  columns: 12,
  container: rem-calc(1000),
  gutter-position: inside-static, // Same with `static`
  gutters: rem-calc(20)
);

However this causes an error as soon as @include span() is used:

Invalid null operation: "12 times null".

I've tried adding an explicit column-width:

  column-width: 8.333333333%,

I am aware there are mixins for adding prefixed and suffixed padding manually, but I want this as a global setting which applies to all spans.

Essentially I'm after the equivalent of this (but with 12 columns):

.wrapper
{
  width:100%;
  float:left;
}

.column
{
  width: 25%;
  float: left;
  padding: 20px;
  box-sizing: border-box;
}

Codepen Here

Note: I'm aware of this question, but it references Susy 1.

Upvotes: 2

Views: 973

Answers (1)

Undistraction
Undistraction

Reputation: 43401

I found a helpful Issue on Susy's Github, linking to a Sassmeister containing an example of what I'm after.

The following works for me:

$gutter-width: rem-calc(10);
$pointless-column-width: rem-calc(1);

// Default layout
$default-layout: (
  global-box-sizing: border-box,
  columns: 12,
  container: rem-calc(1000),
  gutter-position: inside-static,
  column-width: $pointless-column-width,
  gutters: $gutter-width/$pointless-column-width
);

$susy: $default-layout;

I don't understand why a column width needs to be set, and the actual value of it seems to have no effect at all (as long as it isn't null or zero). It just needs to be present.

More in this Github issue I raised including a Sassmeister.

Upvotes: 3

Related Questions