css-gridish
css-gridish copied to clipboard
Use `grid-column-end` instead of `grid-column` for the `grid__col` selectors.
There is a set of utility classnames that you can add to an element that just tells the element how many columns to span at a given breakpoint so you don't have to declare explicit grid positioning for the element (e.g. ibm-grid__col--lg--2
).
The selectors for these use grid-column
(e.g. grid-column: span 2;
) which really means grid-column-start
. It's more likely that someone using these classes to expect the spanning to begin at a starting column and span forward the given number of columns. Doing that would mean using grid-column-end
instead of grid-column-start
(or grid-column
).
I suspect this is only an issue if anyone wants to set both grid-column-start
and grid-column-end
at the same time (perhaps even if not all the cells in a row do).
I think this is the counterpoint that I am pondering: Those legacy classes are only meant to help people transition from flexbox and float grids they are already using. If we switch to grid-column-end
, they can be smooshed instead of wrapping:

