[Bug]: grid gaps not working

[iozuniga]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

Row 'gap' clause is not woking.

Current Behavior

The gap value is not working. Always uses the gap default value 1.5em

Expected behavior

should set gap value to zero, but it does not

Possible Solutions or Causes

I saw in materialize CSS that the rule is:
.row. g-0 {
gap: 0;
}

But I believe it should be without the middle space between '.row' and 'g-0'.

Steps to reproduce

Open this link:
https://www.ozs.es/tests/test.html

Source code:

!DOCTYPE html>

<title>XaWeb</title>

1

2

3

<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.1.0/dist/js/materialize.min.js"></script>

Your Environment

• Version used: https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.1.0/dist/css/materialize.min.css
• Browser Name and version: Edge 127.0.2651.86 (Tested also on Safari and Chrome)
• Operating System and version (desktop or mobile): Any OS
• Additional information you want to tell us:

[Kam3leoN]

i'm french, sorry for my english ;)
this code work correctly in my version et eliminate the repetition in the code.
just grid with GAP idem setting
`
@use "sass:math";

// Mixins to eliminate code repetition
@mixin reset-offset {
margin-left: auto;
left: auto;
right: auto;
}

@mixin grid-classes($size, $i, $perc) {
&.offset-#{$size}#{$i} {
margin-left: $perc;
}
&.pull-#{$size}#{$i} {
right: $perc;
}
&.push-#{$size}#{$i} {
left: $perc;
}
}

.row {
--gap-size: 1.5rem!important; // default gap size

display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--gap-size);

//--- Gap
&.g-0 {
gap: 0;
}
&.g-1 {
gap: calc(0.25 * var(--gap-size));
}
&.g-2 {
gap: calc(0.5 * var(--gap-size));
}
&.g-3 {
gap: calc(1 * var(--gap-size));
}
&.g-4 {
gap: calc(1.5 * var(--gap-size));
}
&.g-5 {
gap: calc(3 * var(--gap-size));
}

//--- S
@for $i from 1 through 12 {
.s#{$i} {
grid-column: auto / span #{$i};
}
.offset-s#{$i} {
grid-column-start: #{$i + 1};
}
}

//--- M
@media #{$medium-and-up} {
@for $i from 1 through 12 {
.m#{$i} {
grid-column: auto / span #{$i};
}
.offset-m#{$i} {
grid-column-start: #{$i + 1};
}
}
}

//--- L
@media #{$large-and-up} {
@for $i from 1 through 12 {
.l#{$i} {
grid-column: auto / span #{$i};
}
.offset-l#{$i} {
grid-column-start: #{$i + 1};
}
}
}

//--- XL
@media #{$extra-large-and-up} {
@for $i from 1 through 12 {
.xl#{$i} {
grid-column: auto / span #{$i};
}
.offset-xl#{$i} {
grid-column-start: #{$i + 1};
}
}
}
}
`

[iozuniga]

Great! Thanks