Generate `grid-template` syntax for better readability

[Dan503]

At the moment it produces code like this:

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  grid-template-rows: 100px 200px 300px;
  grid-template-areas:
    "a a b"
    "a a c"
    "d d e";
}

However it is much easier to read if the code is formatted like this in grid-template:

.grid {
  display: grid;
  grid-template:
    "a   a   b" 100px
    "a   a   c" 200px
    "d   d   e" 300px /
     1fr 2fr 3fr;
}

Note the additional spaces that you need to add to line up the column widths with the start of the area name.

Also, if a row is auto it doesn’t need a row height specified.

.grid {
  display: grid;
  grid-template:
    "sidebar-L main   sidebar-R" 
    "sidebar-L footer sidebar-R" /
     1fr       4fr    1fr;
}

By moving all the values into the 1 rule you can easily see what value is associated with what column/row as long as the formatting is done right. Making sure the column values line up with the start of all the column names is vital for readability.

[Dan503]

Perhaps you can apply it via a checkbox in the UI.

Something like this:

• [ ] Convert to grid-template syntax

[patak-dev]

This sounds great, let us know if you would like to try a PR. If not I'll open this issue to other collaborators.

[Dan503]

I'm not really interested in creating a PR.

I'm comfortable enough with CSS Grid to write my code without a visual tool to help me.

I created the ticket so that people who do use this tool would be able to produce more readable code.

[patak-dev]

Thanks for the suggestion!

[yuri-scarbaci-lenio]

Hello,

I'm not fluent in this project or vue in general, but I did a "generic algorithm" that could be used for this

https://codesandbox.io/s/algorithm-for-layoutit-new-grid-template-9w6c9?file=/src/index.js

if anyone want to take the time to implement it in a PR in this project :)