11
11
rel =dcterms.rights >
12
12
< meta content ="CSS Grid Template Layout Module " name =dcterms.title >
13
13
< meta content =text name =dcterms.type >
14
- < meta content =2013-07-03 name =dcterms.date >
14
+ < meta content =2013-07-17 name =dcterms.date >
15
15
< meta content ="Bert Bos " name =dcterms.creator >
16
16
< meta content ="César Acebal " name =dcterms.creator >
17
17
< meta content =W3C name =dcterms.publisher >
38
38
< h1 class =p-name > CSS Grid Template Layout Module</ h1 >
39
39
40
40
< h2 class ="no-num no-toc " id =longstatus-date-3-august-2004 > Editor's Draft
41
- 3 July 2013</ h2 >
41
+ 17 July 2013</ h2 >
42
42
43
43
< dl >
44
44
< dt > This version:
@@ -2977,7 +2977,7 @@ <h3 id=stacking-elements-on-top-of-a-grid-grid-><span class=secno>4.2.
2977
2977
< tr >
2978
2978
< th > < a href ="#values "> Value</ a > :
2979
2979
2980
- < td > none | rows | columns
2980
+ < td > none | [ rows && dense? ] | [ columns && dense? ]
2981
2981
2982
2982
< tr >
2983
2983
< th > Initial:
@@ -3165,18 +3165,29 @@ <h3 id=stacking-elements-on-top-of-a-grid-grid-><span class=secno>4.2.
3165
3165
< dt > rows
3166
3166
3167
3167
< dd >
3168
- < p > The element is positioned as high as possible in the grid (and if
3169
- there are multiple solutions at the same height: as far to the left as
3170
- possible) such that is doesn't overlap with any earlier elements in the
3171
- document that have the same < a href ="#grid-ancestor "> < em > grid
3172
- ancestor</ em > </ a > and ‘< a href ="#grid-area "> < code
3173
- class =property > grid-area</ code > </ a > ’ other then ‘< a
3174
- href ="#none "> < code class =css > none</ code > </ a > ’. More precisely: the
3175
- element is placed as for ‘< code class =css > grid-area: < var > x</ var >
3176
- < var > y</ var > < var > W</ var > < var > H</ var > </ code > ’, where < var > x</ var > and
3177
- < var > y</ var > are chosen as follows: < span class =issue > Define. Tight
3178
- packing (i.e., closest to top left corner) or preserve element order
3179
- (i.e., to the right or below of previous element)?</ span >
3168
+ < p > Loosely: the element is positioned in the currently last row, to the
3169
+ right of all elements in the row, unless it doesn't fit, in which case
3170
+ it is positioned in the first column of a newly created row.
3171
+
3172
+ < p > More precisely: let (< var > x</ var > < sub > < var > i</ var > </ sub > ,
3173
+ < var > y</ var > < sub > < var > i</ var > </ sub > ,
3174
+ < var > W</ var > < sub > < var > i</ var > </ sub > ,
3175
+ < var > H</ var > < sub > < var > i</ var > </ sub > ) be the columns, rows, widths and
3176
+ heights of element < var > i</ var > for all elements that come earlier in
3177
+ the document and that are positioned in the current grid with ‘< a
3178
+ href ="#grid-area "> < code class =property > grid-area</ code > </ a > ’. Let
3179
+ < var > L</ var > =
3180
+ max< sub > < var > i</ var > </ sub > (< var > y</ var > < sub > < var > i</ var > </ sub > ). If
3181
+ there are no < var > i</ var > , then < var > L</ var > = 1. One can think of
3182
+ < var > L</ var > as the row that is currently being filled. Let < var > C</ var >
3183
+ = max< sub > j</ sub > (< var > x</ var > < sub > < var > j</ var > </ sub > +
3184
+ < var > W</ var > < sub > < var > j</ var > </ sub > ) for all < var > j</ var > such that
3185
+ < var > y</ var > < sub > < var > j</ var > </ sub > = L. If there are no < var > j</ var > ,
3186
+ then < var > C</ var > = 1. This is the next available column in the current
3187
+ row. Then the element is positioned at (< var > L</ var > , < var > C</ var > ) if
3188
+ < var > C</ var > = 1 or < var > C</ var > + < var > W</ var > is less then the < a
3189
+ href ="#number-of-columns "> < em > number of columns</ em > </ a > and it is
3190
+ positioned at (< var > L</ var > + 1, 1) otherwise.
3180
3191
3181
3192
< p > The name ‘< code class =property > rows</ code > ’ comes from the fact
3182
3193
that this algorithms tends to fill a row with subsequent elements and
@@ -3189,16 +3200,13 @@ <h3 id=stacking-elements-on-top-of-a-grid-grid-><span class=secno>4.2.
3189
3200
< dt > columns
3190
3201
3191
3202
< dd >
3192
- < p > The element is positioned as far to the left as possible in the grid
3193
- (and if there are multiple solutions: as high as possible) such that is
3194
- doesn't overlap with any earlier elements in the document that have the
3195
- same < a href ="#grid-ancestor "> < em > grid ancestor</ em > </ a > and ‘< a
3196
- href ="#grid-area "> < code class =property > grid-area</ code > </ a > ’ other
3197
- then ‘< a href ="#none "> < code class =css > none</ code > </ a > ’. More
3198
- precisely: the element is placed as for ‘< code class =css > grid-area:
3199
- < var > x</ var > < var > y</ var > < var > W</ var > < var > H</ var > </ code > ’, where
3200
- < var > x</ var > and < var > y</ var > are chosen as follows: < span
3201
- class =issue > define</ span >
3203
+ < p class =issue > Analogous…
3204
+
3205
+ < dt > dense
3206
+
3207
+ < dd >
3208
+ < p > The element is positioned in the first available unused space in the
3209
+ grid. < span class =issue > Drop? or define?</ span >
3202
3210
</ dl >
3203
3211
3204
3212
< p class =issue > The pair of keywords ‘< code class =css > same/next</ code > ’
@@ -6596,7 +6604,7 @@ <h2 class=no-num id=property-index>Property index</h2>
6596
6604
< tr >
6597
6605
< th > < a class =property href ="#grid-auto "> grid-auto</ a >
6598
6606
6599
- < td > none | rows | columns
6607
+ < td > none | [ rows && dense? ] | [ columns && dense? ]
6600
6608
6601
6609
< td > none
6602
6610
0 commit comments