rtfeldman/elm-css

Support CSS Grid Layout

开放

#269 创建于 2017年5月22日

 (12 条评论) (74 个反应) (0 位负责人)Elm (198 个派生)github user discovery
enhancementhelp wanted

仓库指标

星标
 (1,259 个星标)
PR 合并指标
 (30 天内没有已合并 PR)

描述

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.

贡献者指南