W3C home > Mailing lists > Public > www-style@w3.org > March 2015

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

From: Javier Fernandez <jfernandez@igalia.com>
Date: Tue, 24 Mar 2015 16:18:26 +0100
Message-ID: <55118042.7010800@igalia.com>
To: www-style@w3.org

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.


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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:06 UTC