You can clone with
//Proposed Susy syntax to create "The Fonmon" asymmetric grid layout. http://gridsetapp.com/specs/fonmon.php?gridset=show
$column-width: 200px, 96px, 96px, 96px, 200px;
// could use relative units: 1, 1 would be 50/50%. 1, 2 would be 33/66%, 1, 1, 1 would be 33/33/33%
$columns: column padding, column padding, column padding, column padding, …; //suggested multi dimensional syntax
//with relative units gutter width needs a reference, like 30px at 960px...this needs work
Interesting. So what if I say:
$column-width: 200px, 96px;
Do I get an error, or do we extrapolate out somehow?
My guess, if I tried to extrapolate, would be to mirror and fill, resulting in the same grid you defined.
Yes, I'm sure you could work up some extrapolation logic, similar to margin/padding sytax. Single value gets applied to all columns. Two values gets alternating columns. Even number of values the 2 center values get repeated, odd number and single center value is repeated. (so this could be written 200px, 96px, 200px)
Something like that. I think in most cases you'll either explicitly define each column, or give a single value for all columns.
Thinking about making it unit agnostic and counting the number of columns in the list.
$columns: 1, 1, 1, 1;
makes 4 equal columns
$columns: 2, 1;
makes two columns, one that is 2x the last one.
$columns: 200px, 100px;
$columns: 66%, 33%;
If a user is more comfortable with pixels or percents these both will yield the same result. With a 300px wrapper the px example will be pixel-perfect.
Could even have a multi-dimensional list for different padding on different columns.
$grid: column padding, column padding, column padding, column padding, …;
$grid: 1, 3 1em, 2;
Are gutters typically part of the column width, or in addition to the column width?
If the container width is 1000px and it's 5 equal columns with 20px margin, do we describe it as 200px , 20px margin? Or do we say 180px with 20px margin. Wow, I can see now why getting these grid layouts ironed out can be quite a challenge.
Wish there was a like button for that multi-dimensional list idea. I was wondering what would happen if each grid column needed a different gutter.
Yeah, variable width gutters are super problematic. Cool idea if it can be pulled off tho.
If the container width is 1000px and it's 5 equal columns with 20px margin, do we describe it as 200px , 20px margin?
I was thinking about making the value independent for padding. Gutters would need to speak the same language as columns though.
Wrote some initial logic to figure this out here: https://github.com/scottkellum/Singularity/blob/grid-refactor/stylesheets/singularity/_grid.sass
To keep this thread updated: http://singularity.gs/