"Place" mixin

[brob]

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:

.placed-item {
        align-self: end; // Adds dynamic alignments to the grid item (default to stretch)
        grid-column: 1 / 3;
        grid-row: 1 / 2;
}

[Snugug]

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.

[brob]

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

[Snugug]

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