IBM / css-gridish

Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension.
https://ibm.github.io/css-gridish/
Other
2.25k stars 113 forks source link

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

Open TazmanianDI opened 6 years ago

TazmanianDI commented 6 years ago

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

seejamescode commented 6 years ago

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