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

On Tue, Mar 24, 2015 at 8:18 AM, Javier Fernandez <jfernandez@igalia.com> wrote:
> 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.

Our intention is to maintain simplicity, even if it gives slightly odd
results sometimes.  Grid should do all of its sizing as normal,
ignoring any gutter spaces, and then after the columns are sized the
gutters are added, things stretch, etc.

This might mean that some cells are taller than they need to be,
because they end up being wider than expected, but there's not a lot
we can do about that without massively complicating things.  I think
it's okay.

~TJ

Received on Wednesday, 25 March 2015 22:59:33 UTC