Merge pull request #4224 from alphagov/spike-collapse-grid-for-print

New class to collapse columns for print

CHANGELOG.md

@@ -16,6 +16,7 @@
 * Remove 100 character limit on search results ([PR #4230](https://github.com/alphagov/govuk_publishing_components/pull/4230))
 * Add GA4 redaction to GWF and GB EORI numbers ([PR #4227](https://github.com/alphagov/govuk_publishing_components/pull/4227))
 * Add files for secondary navigation: ([PR #4229](https://github.com/alphagov/govuk_publishing_components/pull/4229))
+* New class to collapse columns for print ([PR #4224](https://github.com/alphagov/govuk_publishing_components/pull/4224))
 
 ## 43.1.1
 

app/assets/stylesheets/govuk_publishing_components/component_support.scss

@@ -12,3 +12,5 @@
 @import "govuk_publishing_components/components/mixins/media-down";
 @import "govuk_publishing_components/components/mixins/margins";
 @import "govuk_publishing_components/components/mixins/css3";
+
+@import "govuk_publishing_components/lib/print_support";

app/assets/stylesheets/govuk_publishing_components/lib/_print_support.scss

@@ -0,0 +1,27 @@
+// A helper class for removing column layouts when printing.
+// This should be applied to row/column layouts, by adding the
+// class to elements with a `govuk-grid-row` class. The columns
+// will then print at the full width of the page.
+// Note that only the immediate child columns will be affected.
+// If a child column also contains a row/column layout of
+// further elements, these will be unaffected and will retain
+// their existing column layout. Use the class again on these
+// nested grids to apply fullwidth column printing if required.
+
+@include govuk-media-query($media-type: print) {
+  .gem-print-columns-none {
+    width: 100%;
+
+    > .govuk-width-container {
+      margin: 0;
+      max-width: none;
+    }
+
+    > [class*="govuk-grid-column"] {
+      position: static !important; // stylelint-disable-line declaration-no-important
+      float: none;
+      clear: both;
+      width: 100%;
+    }
+  }
+}