@@ -175,6 +175,7 @@ Grid Axis Track Sizing</h3>
175
175
except that when considering which items contribute to intrinsic sizes:
176
176
* All items explicitly placed in that track contribute, and
177
177
* All items without an explicit placement contribute
178
+ (regardless of whether they are ultimately placed in that track).
178
179
179
180
<div class="example">
180
181
For example, suppose there are two columns in the [=grid axis=]
@@ -183,11 +184,31 @@ Grid Axis Track Sizing</h3>
183
184
* Item D is explicitly placed into the first column.
184
185
185
186
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.
187
188
</div>
188
189
189
190
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>
191
212
192
213
Note: This algorithm ensures that each track is at least big enough
193
214
to accommodate every item that is ultimately placed in it,
0 commit comments