How to use gallery mixin is Susy 3?

[gNesh01]

Here is the new susy 3, great but where is this feature that I really needed.

@include gallery(4 of 12);

I cant seams to find this is susy 3? Thanks

[mirisuzanne]

For now, this seems to work:

@mixin gallery(
  $span,
  $config: ()
) {
  $grid: susy-compile($span, $config);
  $span: map-get($grid, 'span');
  $column-count: length(map-get($grid, 'columns'));
  $count: floor($column-count / $span);
  $spread: map-get($grid, 'spread') + 2;
  $container-spread: map-get($grid, 'container-spread') + 2;
  $extra: ($container-spread - $spread) * 0.5;
  $extra-push: su-call('su-gutter', $grid) * $extra;
  
  float: left;
  margin-right: -100%;

  @for $n from 1 through ($count) {
    $nth: unquote('#{$count}n + #{$n}');
    $location: $span * ($n - 1) + 1;    
    
    &:nth-child(#{$nth}) {
      $width: susy-compile($span at $location, $grid);
      width: su-call('su-span', $width);

      @if ($location > 1) {
        $wide: susy-compile('first' $location - 1 'wide', $grid);
        clear: none;
        margin-left: su-call('su-span', $wide) + $extra-push;
      } @else {
        clear: both;
        margin-left: if($extra-push > 0, $extra-push, 0);
      }
    }
  }
}

I'll do more testing, and write about it when I get a chance. Let me know if you run into issues with that.

[rafalwrzeszcz]

Correct me if I'm wrong, but you don't longer need gallery() mixin with modern flexbox-based setup. What works great for me is just:

<div class="container">
    <div class="itme">...</div>
    <div class="itme">...</div>
    <div class="itme">...</div>
   ....
</div>

.container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
}

.item {
    width: susy-span(1 of 3);
}

[mirisuzanne]

Yeah, you could even use CSS Grids at this point:

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

Grid also provides special tricks like auto-fill and auto-fit to make this responsive, and grid-gap to add gutters without any difficult math.

[webmasterpf]

Does it could work with a HTML list markup like this ?

<ul class="container">
<li class="item">..</li>
<li class="item">..</li>
<li class="item">..</li>
</ul>

EDIT: the flex way work better than grid.

[Marcel-Hartmann]

Hi mirisuzanne,

I read yor advice to not use a grid framework today. We should use css grid or flexbox for that grid coding. And if we use autoprefixer in our workflow, we can get the most out of the browsers except blackberry and two others on special devices with css grid.

1. Do we need a flexbox fallback for css grids in IE or is autoprefixer enough?

I like the scss susy3 way to have a math library for my scss code. But I want to know one important thing for today.

2. Should we still use the isolation technique for generating gallery grids to prevent subpixel rounding errors, or is it possible to get a Layouts working with a float based layout with percentage() calc like span() does it in susy3?

bye,
Marcel

For a Gallery we needed the gallery mixin in the past to get a css with the subpixelrounding fix with margin-left:

[mirisuzanne]

1. I would not rely on autoprefixer grid-support for old IE. It dramatically limits what you can do with CSS grids. Better to code your own fallbacks (with flexbox or floats or CSS tables or…). See also "Should I try to use the IE implementation of CSS Grid Layout" by Rachel Andrew
2. Moddern browsers handle subpixel rounding better than the isolation technique. Grid is the perfect solution for galleries, like this pattern from GridByExample

I highly recommend gridbyexample.com, LayoutLand videos (like this series on "resilient CSS"), and Rachel Andrew's fallback cheatsheet as additional resources.