CSS grids not supported

[CGjupoulton]

Even with allowStyling(), this:

<div style="display: grid; grid-template-columns: repeat( auto-fit, minmax(160px, 1fr) );">

becomes

<div>

It seems that "display: grid" and all the other CSS grid properties are not part of the list of valid properties. How can I allow these?

[mukuldhariwal94]

I think you need to do

.allowAttributes(
                "style", "class"
        ).globally()

if you want to allow the style tag globally in all html elements or

.allowAttributes(
                "style", "class"
        ).onElements("div"); 

if you want to allow the style tag in only the div elements

[CGjupoulton]

if you want to allow the style tag in only the div elements

That works for other CSS properties such as color, but not the newer grid properties.

[mikesamuel]

CssSchema is where support needs to go.

Do you have a list of the grid properties you need?

The sanitizer needs to preserve visual containment, so we need to be cautious about display properties, like negative left/right/top/bottom values and display:fixed that can be used to exempt an element from a clipping box introduced by a trusted element.

[CGjupoulton]

display: grid; and grid-template-columns: repeat( auto-fit, minmax(160px, 1fr) ); is the CSS I am trying to allow for my use case.

The grid-template-columns propery is quite complex, I'm unsure how to edit the CssSchema to allow it.

If possible, I would like to allow all the grid based properties, referenced here for potential future use.