Repository navigation
Generate grid-template syntax for better readability #90
Description
Activity
Perhaps you can apply it via a checkbox in the UI.
Something like this:
- Convert to
grid-templatesyntax
Reacted by patak- Convert to
This sounds great, let us know if you would like to try a PR. If not I'll open this issue to other collaborators.
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.
Reacted by patakThanks for the suggestion!
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 :)
Reacted by patak, Dan Tonon, Leonardo Flores and Ignacio Zsabo
At the moment it produces code like this:
However it is much easier to read if the code is formatted like this in
grid-template: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
autoit doesn’t need a row height specified.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.