Re: [css-grid][css-align] Issues with align-content / justify-content properties

Hi,

It seems that finally grid containers would allow <content-distribution>
values for both align-content and justify-content properties, which is
great :)  I'm working again on my old implementation and it seems it's
working fine in most of cases; well, actually the simplest ones I'd say.
However, I have some doubts when dealing with items with span or named
grid areas using several tracks.

Let's use a simple example:

.grid {
   grid-template-columns: 20x 30px;
   grid-template-rows: 40px 40px;
   width: 200px;
}
.item1 {
   grid-column: 1 / span 2;
   grid-row: 1;
}
.item2 {
   grid-column: 1;
   grid-row: 2;
}
.item3 {
   grid-column: 2
   grid-row: 2;
}

So now, applying different <content-distribution> values to the
justify-content property, I assume we would want item1's width to be
stretched accordingly to the new position of the 2nd column track.

* space-between:
  - item1's offset-x is 0px
  - item1's width is 200px
* space-evenly:
  - item1's offset-x is 50px
  - item1's width is 100px;
* space-around:
  - item1's offset-x is 37.5px (38px)
  - item1's width is 125px

I think there would be even more complex cases, but let's start with
this in order to state the general behavior we want to achieve, whether
we want or not to stretch spanning items.

Regards,

--
javi

Received on Tuesday, 24 March 2015 15:19:12 UTC