Generate grid-template syntax for better readability #90
Description
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.