@@ -276,66 +276,6 @@ Masonry Layout Algorithm</h3>
276276 to <code><var> max_pos</var> + <var> margin-box-end</var> + <var> grid-gap</var></code> .
277277 </ol>
278278
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-
339279<h2 id="containing-block">
340280Containing Block</h2>
341281
0 commit comments