rtfeldman/elm-css

Support CSS Grid Layout

Aperta

#269 aperta il 22 mag 2017

 (12 commenti) (74 reazioni) (0 assegnatari)Elm (198 fork)github user discovery
enhancementhelp wanted

Metriche repository

Star
 (1259 stelle)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

I would like to start a discussion around supporting the CSS Grid features. CSS Grid is usable on over 50% of devices. Grid is also a powerful enough feature that it is the future of CSS. However, it is rather complicated, from an API perspective. Here are the properties that would need to be supported:

  • display: grid
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid
  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end
  • grid-row
  • grid-column
  • grid-area
  • grid-row-gap
  • grid-column-gap
  • grid-gap

It also has the repeat, minmax, and fit-content css functions.

I believe that also supporting justify-items, justify-content, align-items, and align-content would also be good to do, but I do think that an initial implementation could leave off some of the properties that are just shorthand properties, like grid-template.

Some of these are fairly straightforward, like grid-gap and friends, as they take existing types (ExplicitLength units, I believe), and have a limited number of input formats.

Things get more complicated with properties like grid-template-columns, which has a variety of formats and limitations. Formal spec can be found here. It is further complicated by the new repeat and minmax functions essentially have multiple type signatures, depending on what else is around them.

I took a look at this over the weekend, so I already have a few ideas, but I will put them in a comment, so that they are not mixed up with the problem description.

Guida contributor