style.grid-template-columns inline binding doesn't work

[maxisam]

🐞 bug report

Description

style.grid-template-columns inline binding doesn't work

<div class="grid" [style.grid-template-columns]="'repeat(5,  1fr)'">
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
</div>

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-hbqtjz

🌍 Your Environment

Angular Version:

7.1.4

Anything else relevant?

It works by using ngStyle like [ngStyle]="{ 'grid-template-columns': 'repeat(5, 1fr)'}

[ericmartinezr]

Dup of/related to #9343

[Splaktar]

This doesn't seem like a dupe, certainly related though. The other issue is specific to CSS Variables/Properties.

This issue is just using plain CSS (grid-template-columns) along with its related CSS Function (repeat).

[matteobortolazzo]

Hi, any update on this?
I would like to bind repeat(auto-fill, minmax(${this.itemMinWidth}, 1fr)) but it's not working.

[jonrimmer]

@matteobortolazzo In Angular v9 they have at least fixed binding custom properties, so although the sanitizer is still broken w.r.t grid functions, you may be able to move the repeat definition into your component's stylesheet, and supply just the variable using a style binding, as follows:

.container {
  grid-template columns: repeat(auto-fill, minmax(var(--itemMinWidth), 1fr));
}

<div class="container" [style.--itemMinWidth]="itemMinWidth">
   ...
</div>