CSS Grid Specification workaround

[integrateddigital]

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,

[artf]

Hi @integrateddigital are you able to provide a live demo of your case because honestly, I didn't get how exactly properties are overridden

[integrateddigital]

Hi Art, Yes I would. I will create it and post back here.... txs.s

On 2018-01-03 22:46, Artur Arseniev wrote:

Hi @integrateddigital [1] are you able to provide a live demo of your case because honestly, I didn't get how exactly properties are overridden

-- You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub [2], or mute the thread [3].

*

Links:

[1] https://github.com/integrateddigital [2] https://github.com/artf/grapesjs/issues/695#issuecomment-355149282 [3] https://github.com/notifications/unsubscribe-auth/ARmVIDHA-mpw8JdApmc5Fz0zjPh9M-_fks5tHAMqgaJpZM4RPbq7

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.