CODEWITHSUNDEEP
csssasssusy-compasscompass-sass
redconservatory
redconservatory

Reputation: 21924

Susy grid: how to nest an odd number of columns inside a grid

12 column grid with 5 columns instead

Just wondering what is the best way to go about this...

I am using a Susy grid (Sass/Compass, Susy version one).

My desktop total columns = 12. However inside the twelve, I would like to divide that into 5 columns of equal width.

Is there a simple way to do this using the Susy grid? I don't know how to nest an odd number of columns into an even number of total columns.

Upvotes: 2

Views: 733

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

You can lie to Susy about your context, and it will divide the space into an many columns as you say are available — span-columns(1, 5) will divide the space into 5 units. The only issue is that your gutters will be sized differently in the 12-column grid and the 5 column grid, because they are calculated relative to the size of a column.

The simplest way to get different grids in the same container, and keep equal gutters across grids, is to move the gutters inside. Susy 1 doesn't have an option to automate that, but Susy 2 does. You'd want the inside-static option.

In Susy 1, you would have to set your gutters to 0 (with whatever units you are using), make sure you are using border-box box-sizing, and then add the gutters by hand.

@mixin static-gutters($width) {
  padding-left: $width/2;
  padding-right: $width/2;
}

.item {
  @include span-columns(1, 5);
  @include static-gutters(1em);
}

Upvotes: 3

Related Questions