Open brob opened 7 years ago
The span
mixins provide for both span and placement currently, but instead of using the {{start}} / {{end}}
syntax used above, uses the {{start}} / span {{amount}}
syntax. To accomplish what you've described above, you'd do the following:
.placed-item {
@include span(2, 1); // Span 2 columns starting at the first column
@include row-span(1, 1); // Span 1 column starting at the first column
align-self: end;
}
Which would become
.placed-item {
grid-column: 1 / span 2;
grid-row: 1 / span 1;
align-self: end;
}
Is there a specific need to use the {{start}} / {{end}}
syntax over the span
syntax here? In its current form, the span
mixin won't accommodate negative grid line counting like the the former does, but that's likely a more advanced use of CSS Grid that you're going to want to write the actual syntax for.
I think this may be less about that piece of notation and more about "Should alignment be included in span maybe as an optional argument?" and also "Is span the proper name? (naming stuff is hard)"
Edit: Getting buy-in from Grid advocates, I think "Placing" will make them more comfortable than "span" since it evokes more of the 2-dimensional aspects and "spanning" feels more 1-dimensional
The span
language is included as a way of tying the notation back to Singularity, Zen Grids, and Susy who use that language and mental model when discussing how many columns to include and what column to start at (which is what is happening here, too). Specifically look at how Singularity describes spanning to understand why that language was chosen.
Considering that when working with the grouping of span
mixins (span
/column-span
, vertical-span
/row-span
) you are only ever working in one dimension, it feeling like a 1-dimensional mixin is intentional. The goal of the mixins are to provide a wrapping that feels closer to the mental model users of the above are likely to be already familiar with. There currently isn't a 2-dimensional mixin, although we can discuss adding one provided that discussion is about adding new 2-dimensional functionality and not attempting to re-appropriate the existing 1-dimensional functionality.
Finally, I do not believe that adding alignment in to these mixins is something that would prove useful or align with their single dimensional intention. A 2-dimensional mixin may be a better place for that, but we need to consider what the advantage of that mixin may provide over writing the alignment property and using these two mixins for vertical and horizontal placement and sizing. I would prefer not to write a grid system or a full abstraction over all of Grid just to have an abstraction layer, but rather provide a small set of abstractions that smooth the mental model transition from the aforementioned grid frameworks to CSS Grid. The lighter the touch, the better. It is this very reason why the Grid span
notation is used, to make clear what input goes where and why in the final output
Part of the power of grid is being able to place items across both x and y axis. I'm not sure if this is a refactor of the span mixin or a new mixin on top of that, but I think having a full-featured "placement" mixin would be interesting.
I played with an implementation, but Sass doesn't dig on the Grid notation of
grid-column: start / end
Potential Example output: