CSS Grid Specification workaround

Hi Art and All, 
I was wondering if anyone has used the new CSS specification layout CSS Grids; 
it works great, if display:grid is used including grid items under display:grid that are display:flex. 
The problem that I have is when using the import/edit plugin and adding a CSS Grid via display:grid, the 
editor accepts it but overrides grid-area (grid items, flex items included ) and grid-template-area (main grid wrapper) -the workaround is to convert all: 
grid-template-area and grid-area to grid-column and grid-row
(using named lines )
By doing so, it will work, for example in the following 3 x 3 grid ( 3 columns by  3 rows ):

if you add, via import/edit plugin the following: 
.mainGrid { display:grid; grid-template-columns: [col11start] 1fr [col2start] 2fr [col3start] 0.5fr [col3end];
                 grid-template-rows: [row1start] auto [row2start] auto [row3start] auto [row3end];
                 grid-template-areas "headerArea headerArea logoArea"
                                                "navArea contentArea contentArea"
                                                "additionalSlotArea footerArea footerArea"}
.griditems {display: flex;}
.header { grid-area: headerArea; } .content {grid-area:contentArea;}
.logo {grid-area: logoArea; } .footer {grid-area: footerArea;} .slot {grid-area:additionalSlotArea;}

This works fine in most browsers ... but if you import it via the cited plugin above, it overrides 
all properties related to area; the workaround is to replace area with grid-/column/row, 
so the above example would become: 
.logo { grid-column: col1start; grid-row: row1start; } 
.footer {grid-column: col2start / col3end ; grid-row: row3start; }
.slot {grid-column: col1start ;grid-row:row3start;
.content {grid-column: col2start / col3end ; grid-row:row2start ; }
( and delete the grid-template-areas: property from the main grid item class ).
By doing the above conversion you will be able to keep all the formatting. 

It would be nice to understand why it overrides as it would be even nicer to be able to use grid-areas on dynamic templates. Does anyone know ? 

thanks for GrapesJS, not sure how to classify this issue / workaround.
best,