Fixed column grid doesn't behave as expected

[pauleustice]

Hi,

I've just started using Gridish and it seems like a great tool! One thing though, when selecting --fixed-columns, I expected my Grid would stick to the specified number of columns in the config file. However, it repeat()s using the auto-fill property, which results in a behaviour which doesn't conform to Material Design's definition of a fixed grid because between breakpoints the grid keeps to the maximum width but the column count changes (Chrome 67, OSX 10.13.5).

Not that MD is the definitive style-guide, but I think this is more or less a universal standard for an 'adaptive' or 'fixed' grid.

If that isn't a bug, would it be possible to provide a config option in css-gridish.json to use repeat($columnCount) for each breakpoint, ensuring that the column quantity is preserved? At the moment I'm doing this to achieve the desired behaviour:

@import "../grid/scss/core";

/*
  Override Gridish fixed column behaviour to preserve number of columns
  at all breakpoints while centering the grid. Without this, fixed columns
  will repeat to fill the space, rather than stick to the 'columns' config
  setting in css-gridish.json
*/

.bl-grid.bl-grid--fixed-columns {
  // Horizontally centre grid within container
  justify-content: center;

  @each $name, $size in $breakpoints {
    $break: map-get($size, 'breakpoint');
    $cols: map-get($size, 'columns');

    // Breakpoint for 320px devices. Between this and 360px wide, columns flex using vw units
    @if $name == 'xxsmall' {
      grid-template-columns: repeat($cols, #{100/$cols}vw);
    } @else {
      @include media-query($name) {
        grid-template-columns: repeat($cols, #{$break/$cols}rem);
      }
    }
  }
}

Thanks!

[seejamescode]

Hey @pauleustice, what you are describing already happens was the intended functionality of --fixed-columns. That class came out of the need for data tables and horizontal scrolling sections.

However, that Material Design definition of a fixed grid is also helpful. If it was added, I think the proper class modifier would be --fixed-grid.

[pauleustice]

@seejamescode Ah I see! That makes sense.

I think it could be very useful functionality for others given the number of adaptive responsive websites out there that will be wanting to switch to CSS Grid. If you decide to implement it, one change I'd recommend from my code above is to implement something like this instead of referencing my custom breakpoint 'xxsmall':

@include media-query($first, "<")