Custom breakpoints + grid-margin-x = incorrect size ordering

[wgstjf]

Hi guys,

Not sure if we have discovered a bug with grid-margin-x in 6.4.1 or whether we've got something wrong. Here's the situation...we have custom breakpoints and custom breakpoint classes as below:

$breakpoints: (
  small: 0,
  smallx: 376px,
  medium: 668px,
  mediumx: 1024px,
  large: 1210px,
  xlarge: 1701px,
  xxlarge: 1921px,
);
$print-breakpoint: large;
$breakpoint-classes: (small smallx medium mediumx large xlarge);

When using grid-margin-x we are finding that the 'small' breakpoint is overriding our custom one 'mediumx'. Looking at the compiled css it looks like the ordering is messed up, with the 'small' breakpoint stuff appearing (or at least being repeated) after the 'mediumx' styles thus leading to the overriding of what should be the correct sizes etc. Below is a snippet of the compiled css showing the issue...

  @media print, screen and (min-width: 64em) { /* mediumx */
    .grid-margin-x > .mediumx-auto {
      width: auto; }
    .grid-margin-x > .mediumx-shrink {
      width: auto; }
    .grid-margin-x > .mediumx-1 {
      width: calc(8.33333% - 2.25rem); }
    .grid-margin-x > .mediumx-2 {
      width: calc(16.66667% - 2.25rem); }
    .grid-margin-x > .mediumx-3 {
      width: calc(25% - 2.25rem); }
    .grid-margin-x > .mediumx-4 {
      width: calc(33.33333% - 2.25rem); }
    .grid-margin-x > .mediumx-5 {
      width: calc(41.66667% - 2.25rem); }
    .grid-margin-x > .mediumx-6 {
      width: calc(50% - 2.25rem); }
    .grid-margin-x > .mediumx-7 {
      width: calc(58.33333% - 2.25rem); }
    .grid-margin-x > .mediumx-8 {
      width: calc(66.66667% - 2.25rem); }
    .grid-margin-x > .mediumx-9 {
      width: calc(75% - 2.25rem); }
    .grid-margin-x > .mediumx-10 {
      width: calc(83.33333% - 2.25rem); }
    .grid-margin-x > .mediumx-11 {
      width: calc(91.66667% - 2.25rem); }
    .grid-margin-x > .mediumx-12 {
      width: calc(100% - 2.25rem); } }
  @media print, screen and (min-width: 75.625em) {  /* large */
    .grid-margin-x > .auto {
      width: auto; }
    .grid-margin-x > .shrink {
      width: auto; }
    .grid-margin-x > .small-1 { /* These entries overriding the 'mediumx' styles */
      width: calc(8.33333% - 2.5rem); }
    .grid-margin-x > .small-2 {
      width: calc(16.66667% - 2.5rem); }
    .grid-margin-x > .small-3 {
      width: calc(25% - 2.5rem); }
    .grid-margin-x > .small-4 {
      width: calc(33.33333% - 2.5rem); }
.grid-margin-x > .small-5 {
      width: calc(41.66667% - 2.5rem); }
    .grid-margin-x > .small-6 {
      width: calc(50% - 2.5rem); }
    .grid-margin-x > .small-7 {
      width: calc(58.33333% - 2.5rem); }
    .grid-margin-x > .small-8 {
      width: calc(66.66667% - 2.5rem); }
    .grid-margin-x > .small-9 {
      width: calc(75% - 2.5rem); }
    .grid-margin-x > .small-10 {
      width: calc(83.33333% - 2.5rem); }
    .grid-margin-x > .small-11 {
      width: calc(91.66667% - 2.5rem); }
    .grid-margin-x > .small-12 {
      width: calc(100% - 2.5rem); }
    .grid-margin-x > .medium-auto {
      width: auto; }
    .grid-margin-x > .medium-shrink {
      width: auto; }
    .grid-margin-x > .medium-1 {
      width: calc(8.33333% - 2.5rem); }
    .grid-margin-x > .medium-2 {
      width: calc(16.66667% - 2.5rem); }
    .grid-margin-x > .medium-3 {
      width: calc(25% - 2.5rem); }
    .grid-margin-x > .medium-4 {
      width: calc(33.33333% - 2.5rem); }
    .grid-margin-x > .medium-5 {
      width: calc(41.66667% - 2.5rem); }
    .grid-margin-x > .medium-6 {
      width: calc(50% - 2.5rem); }
    .grid-margin-x > .medium-7 {
      width: calc(58.33333% - 2.5rem); }
    .grid-margin-x > .medium-8 {
      width: calc(66.66667% - 2.5rem); }
    .grid-margin-x > .medium-9 {
      width: calc(75% - 2.5rem); }
    .grid-margin-x > .medium-10 {
      width: calc(83.33333% - 2.5rem); }
    .grid-margin-x > .medium-11 {
      width: calc(91.66667% - 2.5rem); }
    .grid-margin-x > .medium-12 {
      width: calc(100% - 2.5rem); }
    .grid-margin-x > .large-auto {
      width: auto; }
    .grid-margin-x > .large-shrink {
      width: auto; }
    .grid-margin-x > .large-1 {
      width: calc(8.33333% - 2.5rem); }
    .grid-margin-x > .large-2 {
      width: calc(16.66667% - 2.5rem); }
    .grid-margin-x > .large-3 {
      width: calc(25% - 2.5rem); }
    .grid-margin-x > .large-4 {
      width: calc(33.33333% - 2.5rem); }
    .grid-margin-x > .large-5 {
      width: calc(41.66667% - 2.5rem); }
    .grid-margin-x > .large-6 {
      width: calc(50% - 2.5rem); }
    .grid-margin-x > .large-7 {
      width: calc(58.33333% - 2.5rem); }
    .grid-margin-x > .large-8 {
      width: calc(66.66667% - 2.5rem); }
    .grid-margin-x > .large-9 {
      width: calc(75% - 2.5rem); }
    .grid-margin-x > .large-10 {
      width: calc(83.33333% - 2.5rem); }
    .grid-margin-x > .large-11 {
      width: calc(91.66667% - 2.5rem); }
    .grid-margin-x > .large-12 {
      width: calc(100% - 2.5rem); } }

and a screenshot from Chrome Dev Tools

Any help, as always, greatly appreciated.

Cheers

Will

[kball]

Ah interesting... this looks like an interaction with the responsive gutters. What does your grid-margin-gutters object look like?

[wgstjf]

@kball thanks for responding to this, much appreciated

As requested :-)

$grid-margin-gutters: (
  small: 30px,
  medium: 36px,
  large: 40px
);

[timluigjes]

I got the same problem with custom breakpoints.
With the following breakpoints the medium margin is triggered too soon.

$breakpoints: ( small: 0, medium: 768px, large: 1024px, xlarge: 1200px, xxlarge: 1440px, );

[AtlantaJones]

@ncoden @wgstjf Any movement on this?. I just discovered this issue as well with 6.4.4-rc1. We have two breakpoints for small and large so far. And on very large screens, the small breakpoint is what's being used to calculate gutters. Without a workaround, this might keep us from making our grid system completely semantic.

[ncoden]

@wgstjf @timluigjes @AtlantaJones Thanks for the bump. See #11117