Add tablet specific grid classes

Inspired by “desktop specific grid classs” in: alphagov/govuk-frontend#1094
nhsuk · Feb 21, 2025 · 9263cdf · 9263cdf
1 parent 4b5c041
commit 9263cdf
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/packages/core/objects/_grid.scss b/packages/core/objects/_grid.scss
@@ -11,6 +11,15 @@
     margin-left: -($nhsuk-gutter-half);
   }
 
+  // These *must* be defined in a separate loop as they have the same
+  // specificity as the non-breakpoint specific classes, so need to appear before
+  // them in the outputted CSS
+  @each $width in map-keys($nhsuk-grid-widths) {
+    .nhsuk-grid-column-#{$width}-from-tablet {
+      @include govuk-grid-column($width, $at: tablet, $class: false);
+    }
+  }
+
   @each $width in map-keys($nhsuk-grid-widths) {
     .nhsuk-grid-column-#{$width} {
       @include govuk-grid-column($width, $class: false);