Skip to content

Commit 0ac5d9d

Browse files
stwrtfantasai
authored andcommitted
[css-grid-3] Remove masonry-auto-flow
Remove masonry-auto-flow based on the resolution here: #10231
1 parent f85f018 commit 0ac5d9d

File tree

1 file changed

+0
-60
lines changed

1 file changed

+0
-60
lines changed

css-grid-3/Overview.bs

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -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">
340280
Containing Block</h2>
341281

0 commit comments

Comments
 (0)