Why is footer using grid?

[StevenTCramer]

.footer {
    display: grid;
    z-index: 10;
    flex-direction: column;
    position: relative;
    font-family: var(--body-font);
    font-weight: normal;
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
}

If setting display to grid then flex-direction doesn't make sense.

I would prefer it be flex but I don't know the reasoning for the decisions.

If I want to change it to flex in localized css how can I do that?

 ::deep > footer {
  display: flex;
  flex-direction: row;
  padding: 10px 10px;
}

The above gets applied but is always overridden by the Fluent CSS which puts it back to grid.

The only way I have figured out how to change it is with Style="display: flex; flex-direction: row;"

[StevenTCramer]

Here one can see the Styles. The Style tag > FluentUI lib > isolated css > site.css > app.css

[vnbaaij]

I think this just comes from a bad design decission in the past. In the demo site we are overwriting it as well:

Noticed it before, but did not change it then because it might be considered a breaking change (albeit a small one for sure) but will change it for the next release to:

.footer {
    display: flex;
    z-index: 10;
    flex-direction: row;
    font-family: var(--body-font);
    font-weight: normal;
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
}

For the templates this means that I'll add a FluentSpacer to the footer so the texts will still align left an right. I'll also remove some then redundant CSS for those links from the app.css

[vnbaaij]

PR is created for this: #1778