css-gridish icon indicating copy to clipboard operation
css-gridish copied to clipboard

Use `grid-column-end` instead of `grid-column` for the `grid__col` selectors.

Open TazmanianDI opened this issue 6 years ago • 1 comments

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).

TazmanianDI avatar Mar 19 '18 20:03 TazmanianDI

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:

screen shot 2018-03-19 at 3 10 12 pm screen shot 2018-03-19 at 3 10 20 pm

seejamescode avatar Mar 19 '18 20:03 seejamescode