CODEWITHSUNDEEP
sasssusy-compass
Niko Sams
Niko Sams

Reputation: 4414

Nested grids with breakpoints

I want to use susy for two nested grids. One that defines the page layout (menu on the left, content on the right) and one inside content.

Reason for that is that the content is created by a CMS where different templates can be used and I'd like to have the scss code together with the template. Using a fluid grid seems to solve exactly that problem:

<div class="page">
    <div class="menu">
        <ul><li>foo</li><li>bar</li></ul>
    </div>
    <div class="content">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</div>

@import "susy";

/* Outer Grid  (Page Layout) */
$total-columns  : 4;
$column-width   : 1024px / $total-columns;
$gutter-width   : 0px;
$grid-padding   : 0px;
.page {
    @include container;
    .menu {
        @include span-columns(1);
    }
    .content {
        @include span-columns(3);
    }
}

/* Inner Grid */
$total-columns  : 1;
$column-width   : 200px;
$gutter-width   : 0px;
$grid-padding   : 0px;
$container-style: fluid;
.page .content {
    @include container;
    .item {
        @include span-columns(1);
    }
    @include at-breakpoint(3) {
        @include container;
        .item {
            @include span-columns(1);
        }
    }
}

My problem is the $column-width: 200px; for the inner grid, as the generated media query uses min-widht: 600px, although at this point there is only 75% width available.

What's the best way to implement this?

Upvotes: 1

Views: 786

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

The container mixin doesn't do anything useful in a nested context. It sets a max-width and auto margins (for page centering) - both of which are already taken care of by your outer container.

I also recommend against 1-column grids. Start with your smallest useful grid (3), and just don't use the columns until you get past your mobile breakpoint.

It will become more clear in Susy 2.0, but column and gutter widths are mainly used to create a ratio - so the units you use don't matter much if you want to set them based on container width. That may sound confusing, but here's how I would achieve what you want:

$total-columns  : 4;
$column-width   : 200px;
$gutter-width   : 0px;
$grid-padding   : 0px;
$container-width: 1024px;

Based on those settings, Susy creates 4 columns without gutters, divided evenly from the available 1024px container-width. Since you set the $container-width, Susy is using $column-width and $gutter-width to determine a ratio - and since one side of that ratio is 0, it doesn't matter what the other side is, as long as it's something. The other use of those values is for calculating breakpoints. We'll see that a bit later. Now you can do your things:

.page {
  @include container;
  .menu {
    @include span-columns(1);
  }
  .content {
    @include span-columns(3 omega);
  }
}

and:

.page .content {
  .item {
    // Elements span the full width by default, so nothing is needed in mobile view.
    @include at-breakpoint($total-columns) {
      @include span-columns(1,3);
      @include nth-omega(3n);
    }
  }
}

The settings for the outer grid work just fine for the inner grid as well. They aren't actually different grids, just elements nested inside other elements.

Upvotes: 1

Related Questions