search

mdgriffith / style-elements

Create styles that don't mysteriously break!
http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
BSD 3-Clause "New" or "Revised" License
445 stars 49 forks source link

Grid cell alignment (justify-content vs justify-items) #149

Open felixakiragreen opened 6 years ago

felixakiragreen commented 6 years ago

The big picture of what I'm trying to do

I'm trying to align my content inside a grid.

grid Ss.PageGrid
  [ width w
  , height h
  , center
  ]
  { columns =
    [ fill, px 640, fill ]
  , rows =
    [ px 60, fill, px 60 ]
  , cells =
    [ cell
      { start = ( 0, 0 )
      , width = 3
      , height = 1
      , content = header
      }
    , cell
      { start = ( 0, 1 )
      , width = 3
      , height = 1
      , content = content
      }
    , cell
      { start = ( 0, 2 )
      , width = 3
      , height = 1
      , content = footer
      }
    ]
  }

What I did

I tried using center and alignLeft/alignRight did not see any results. Upon inspecting the DOM, I discovered that center was being transformed to justify-content: center;. When I changed it to justify-items: center then it worked.

After doing some research and digging into the grid spec I discovered the differences between them.

justify-items

justify-items

justify-content

justify-content

Typically justify-items is used more for display: grid, and justify-content is used more for display: flex. But they both have separate use-cases, and in this case I need justify-items. While searching for a solution, I found this commit and discovered that simply reverting it fixes my problem.

After a little more fiddling, I discovered that if I changed the columns from using fill to only px values then justify-content: center worked. It fails with %, fr, auto.

I can make a version in ellie-app if necessary -- but I think this should be pretty straight forward.

PS. I would love to use minmax() if possible. (I found it being used in an experiments file).

Versions