@@ -276,66 +276,6 @@ Masonry Layout Algorithm</h3>
276
276
to <code><var> max_pos</var> + <var> margin-box-end</var> + <var> grid-gap</var></code> .
277
277
</ol>
278
278
279
- <h3 id="masonry-auto-flow">
280
- The ''masonry-auto-flow'' Property</h3>
281
-
282
- The [[#masonry-layout-algorithm]] above can be modified in two ways, using the new 'masonry-auto-flow' property:
283
-
284
- <pre class='propdef'>
285
- Name : masonry-auto-flow
286
- Value : [ pack | next ] || [definite-first | ordered ]
287
- Initial : pack
288
- Applies to : [=grid containers=] with [=masonry layout=]
289
- Inherited : no
290
- Percentages : n/a
291
- Computed value : specified keyword(s)
292
- Animation type : discrete
293
- </pre>
294
-
295
-
296
- First, picking definite items first for placement can be inhibited
297
- by specifying the ''masonry-auto-flow/ordered'' keyword
298
- so that a plain [=order-modified document order=] is used instead.
299
- Second, instead of placing the items in the track(s) with the most remaining space as described above
300
- we can place them one after another in the [=grid axis=]
301
- by specifying the ''masonry-auto-flow/next'' keyword,
302
- for <a href="examples/masonry-auto-flow-next.html">example</a> :
303
-
304
- <div class="example">
305
- ```css
306
- <style>
307
- .grid {
308
- display: inline-grid;
309
- grid: masonry / repeat(3, 2ch);
310
- border: 1px solid;
311
- masonry-auto-flow: next;
312
- }
313
-
314
- item { background: silver }
315
- item:nth-child(2n+1) {
316
- background: pink;
317
- height: 4em;
318
- }
319
- </style>
320
- ```
321
- ```html
322
- <div class="grid">
323
- <item> 1</item>
324
- <item> 2</item>
325
- <item> 3</item>
326
- <item> 4</item>
327
- </div>
328
- ```
329
-
330
- <figure>
331
- <img src="images/grid-auto-flow-example-1.png">
332
- <figcaption> Rendering of the ''masonry-auto-flow: next'' example above.</figcaption>
333
- </figure>
334
-
335
- (Without ''masonry-auto-flow: next'' , item 4 would be placed below item 2.)
336
-
337
- </div>
338
-
339
279
<h2 id="containing-block">
340
280
Containing Block</h2>
341
281
0 commit comments