gdColumns do not set "display: grid"

[pasha-bolokhov]

Bug Report

I have a div which disappears on "xs" screens

<div gdColumns.gt-xs="100px 100px" gdAlignRows.gt-xs="end stretch" fxShow fxHide.lt-sm>
...
</div>

If you load the page originally on a large screen, it shows up alright. However, if you load the page on an "xs" screen, and then enlarge it, the inner formatting gets corrupted, because this div does not get a display: grid clause

What is the expected behavior?

Expecting to see a consistent picture, regardless whether you load the page on a large or small screen, then enlarge or shrink it, this div should always appear identical

What is the current behavior?

Currently, again, original load on an "xs" page, followed by an enlargement of the screen, shows a "corrupt" version of the div, which is remedies by adding display: grid either in dev tools, or explicitly in CSS file

What are the steps to reproduce?

This issue sounds "somewhat" similar to #1165, although I was not able to reproduce or figure out what exactly was going wrong in that case

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[CaerusKaru]

Duplicate of #1130

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}