Skip to content

Commit d0d81c5

Browse files
committed
[css-grid-3][masonry] Make intrinsic track sizing handle spanning items w3c#8206 w3c#9041
1 parent 633c049 commit d0d81c5

File tree

1 file changed

+23
-2
lines changed

1 file changed

+23
-2
lines changed

css-grid-3/Overview.bs

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ Grid Axis Track Sizing</h3>
175175
except that when considering which items contribute to intrinsic sizes:
176176
* All items explicitly placed in that track contribute, and
177177
* All items without an explicit placement contribute
178+
(regardless of whether they are ultimately placed in that track).
178179

179180
<div class="example">
180181
For example, suppose there are two columns in the [=grid axis=]
@@ -183,11 +184,31 @@ Grid Axis Track Sizing</h3>
183184
* Item D is explicitly placed into the first column.
184185

185186
In this case, items A, B, C, and D all contribute to sizing the first column,
186-
<em>and</em> A, B, and C (but not D) contribute to the second column.
187+
while only A, B, and C (and not D) contribute to the second column.
187188
</div>
188189

189190
In the case of spanning items with no explicit placement,
190-
their size contribution is divided by their spanning size.
191+
they are assumed to be placed at every possible start position,
192+
and contribute accordingly.
193+
194+
<div class="example">
195+
For example, suppose there are 5 columns in the [=grid axis=],
196+
with the middle having a fixed size of ''100px''
197+
and the other two being ''auto''-sized.
198+
For the purpose of track sizing,
199+
an item that spans 2 tracks
200+
and has an intrinsic contribution of 220px
201+
is essentially copied and assumed to exist:
202+
203+
* At grid line 1,
204+
contributing 110px to each of the first two tracks.
205+
* At grid line 2,
206+
contributing 120px to the second track.
207+
* At grid line 3,
208+
contributing 120px to the fourth track.
209+
* At grid line 4,
210+
contributing 110px to the fourth and fifth tracks.
211+
</div>
191212

192213
Note: This algorithm ensures that each track is at least big enough
193214
to accommodate every item that is ultimately placed in it,

0 commit comments

Comments
 (0)