Fix GridCSS responsive styles

Megabit · Oct 14, 2023 · 095cb0e · 095cb0e
1 parent 53f168a
commit 095cb0e
Show file tree

Hide file tree

Showing 15 changed files with 1,659 additions and 45 deletions.
diff --git a/Source/Blazorise.AntDesign/Styles/_grid.scss b/Source/Blazorise.AntDesign/Styles/_grid.scss
@@ -100,15 +100,23 @@
     grid-template-columns: repeat(12, 1fr);
     gap: #{$grid-gutter-width};
 
-    @for $i from 1 through $grid-rows {
-        &.ant-grid-rows-#{$i} {
-            grid-template-rows: repeat($i,minmax(0,1fr));
-        }
-    }
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    @for $i from 1 through $grid-columns {
-        &.ant-grid-cols-#{$i} {
-            grid-template-columns: repeat($i,minmax(0,1fr));
+        @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+            @if $grid-columns > 0 {
+                @for $i from 1 through $grid-rows {
+                    &.ant-grid-rows#{$infix}-#{$i} {
+                        grid-template-rows: repeat($i,minmax(0,1fr));
+                    }
+                }
+
+                @for $i from 1 through $grid-columns {
+                    &.ant-grid-cols#{$infix}-#{$i} {
+                        grid-template-columns: repeat($i,minmax(0,1fr));
+                    }
+                }
+            }
         }
     }