Fix grid for `@media print`

[SPodjasek]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Previously (not sure how far ago), it was possible to use grid rows & columns on print media. However, as I've found in v5.2, they stopped working on printed media.

My hot fix is pretty simple, but I've no clue how to fit it correctly in the current source tree not to break other things, so I'm posting this as an issue, not a PR:

@media print {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @for $i from 1 through $grid-columns {
      .col#{$infix}-#{$i} {
        @include make-col($i, $grid-columns);
      }
    }
  }
}

Reduced test cases

Simple test with example from documentation (https://getbootstrap.com/docs/5.2/layout/grid/#stacked-to-horizontal): https://vvlanw--run.stackblitz.io/ - when rendered in browser columns are split as requested in a row, when you do a print preview all columns are 100% wide.

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.2.3

[SPodjasek]

I'll just answer my self with reference to #28339

[septatrix]

I do not think the issue you referenced it at fault here. That only means print specific adjustments like suppressing box shadows were removed. Instead, I think you are running into the same chromium bug I ran into at the start of the week: Issue 489521: @media attributes height, min-height, max-height, width, min-width, max-width are incorrectly calculated when printing. At least for me, in Firefox, everything works as expected. My workaround so far is to override the breakpoint mixins to force the md breakpoint to also apply when printing (so that it looks good on A4).

[SPodjasek]

@septatrix Indeed I haven't checked it on Firefox, but using Firefox is sadly not an option for me.

[septatrix]

Sure, for me I also have to guarantee that is works in all browsers. However, this is just an head up towards the actual problem because your hotfix probably does not do what you want: While you are iterating over each breakpoint, the corresponding media query is not included in the resulting CSS. So in practice you are just forcing col-*-* to be applied regardless of size when you are printing. If you want this fixed you should probably follow/star the chromium bug I linked above.