Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

33989 remove support for a j tracks #34281

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions files/en-us/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -11558,6 +11558,7 @@
/en-US/docs/Web/CSS/_image /en-US/docs/Web/CSS/image/image
/en-US/docs/Web/CSS/abs() /en-US/docs/Web/CSS/abs
/en-US/docs/Web/CSS/additive-symbols /en-US/docs/Web/CSS/@counter-style/additive-symbols
/en-US/docs/Web/CSS/align-tracks /en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout
/en-US/docs/Web/CSS/attr() /en-US/docs/Web/CSS/attr
/en-US/docs/Web/CSS/auto /en-US/docs/Web/CSS/width
/en-US/docs/Web/CSS/basic-shape/circle() /en-US/docs/Web/CSS/basic-shape/circle
Expand Down Expand Up @@ -11645,6 +11646,7 @@
/en-US/docs/Web/CSS/image/paint() /en-US/docs/Web/CSS/image/paint
/en-US/docs/Web/CSS/imagefunction /en-US/docs/Web/CSS/image/image
/en-US/docs/Web/CSS/inherited_and_non-inherited_properties /en-US/docs/Web/CSS/Inheritance
/en-US/docs/Web/CSS/justify-tracks /en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout
/en-US/docs/Web/CSS/kerning /en-US/docs/Web/CSS/font-kerning
/en-US/docs/Web/CSS/lighting-color /en-US/docs/Web/SVG/Attribute/lighting-color
/en-US/docs/Web/CSS/linear-gradient /en-US/docs/Web/CSS/gradient/linear-gradient
Expand Down
8 changes: 0 additions & 8 deletions files/en-us/_wikihistory.json
Original file line number Diff line number Diff line change
Expand Up @@ -79531,10 +79531,6 @@
"scottrowe"
]
},
"Web/CSS/align-tracks": {
"modified": "2020-11-12T04:51:22.504Z",
"contributors": ["rachelandrew", "chrisdavidmills"]
},
"Web/CSS/all": {
"modified": "2020-10-15T21:25:07.229Z",
"contributors": [
Expand Down Expand Up @@ -86193,10 +86189,6 @@
"teoli"
]
},
"Web/CSS/justify-tracks": {
"modified": "2020-11-12T04:51:57.763Z",
"contributors": ["rachelandrew", "chrisdavidmills"]
},
"Web/CSS/left": {
"modified": "2020-10-15T21:06:18.645Z",
"contributors": [
Expand Down
2 changes: 0 additions & 2 deletions files/en-us/glossary/alignment_container/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,9 @@ The **alignment container** is the rectangle that the {{glossary("alignment subj
- CSS {{CSSXref("align-content")}} property
- CSS {{CSSXref("align-items")}} property
- CSS {{CSSXref("align-self")}} property
- CSS {{CSSXref("align-tracks")}} property
- CSS {{CSSXref("justify-content")}} property
- CSS {{CSSXref("justify-items")}} property
- CSS {{CSSXref("justify-self")}} property
- CSS {{CSSXref("justify-tracks")}} property
- CSS {{CSSXref("place-content")}} shorthand property
- CSS {{CSSXref("place-self")}} shorthand property
- CSS {{CSSXref("scroll-snap-align")}} property
Expand Down
82 changes: 0 additions & 82 deletions files/en-us/web/css/align-tracks/index.md

This file was deleted.

2 changes: 0 additions & 2 deletions files/en-us/web/css/css_grid_layout/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,6 @@ The example below shows a three-column track grid with new rows created at a min
- {{CSSxRef("column-gap")}}
- {{CSSxRef("gap")}}
- {{CSSxRef("masonry-auto-flow")}}
- {{CSSxRef("align-tracks")}}
- {{CSSxRef("justify-tracks")}}

### Functions

Expand Down
20 changes: 1 addition & 19 deletions files/en-us/web/css/css_grid_layout/masonry_layout/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,30 +50,12 @@ This example includes an item which has positioning for columns. Items with defi

{{EmbedGHLiveSample("css-examples/grid/masonry/positioned.html", '100%', 1000)}}

## Controlling the masonry axis

The masonry axis operates under different rules as it is following the masonry layout rules rather than normal grid auto-placement rules. To control this axis we have three additional properties defined in the Grid Level 3 specification {{cssxref("align-tracks")}}, {{cssxref("justify-tracks")}}, and {{cssxref("masonry-auto-flow")}}.

### masonry-auto-flow
## masonry-auto-flow

The `masonry-auto-flow` property gives you a way to change how the masonry algorithm behaves. Give it a value of `next` and items will display in order on the grid axis, rather than going into whichever track has the most free space. The value `positioned` will ignore items with definite placement and place items in order-modified document order.

{{EmbedGHLiveSample("css-examples/grid/masonry/masonry-auto-flow.html", '100%', 1000)}}

### align-tracks

The `align-tracks` property allows for the alignment of items in grid containers with masonry in their block axis. The property aligns the items within their track, much in the way flex layout works. The property takes the same values as `align-content`, however you can specify multiple values to have different alignment values per track on the grid axis.

If you specify more values than tracks the additional values are ignored. If there are more tracks than values any additional tracks will use the last specified value.

{{EmbedGHLiveSample("css-examples/grid/masonry/align-tracks.html", '100%', 1000)}}

### justify-tracks

The `justify-tracks` property works in the same way as align-tracks, however it is used when the masonry axis is the inline axis.

{{EmbedGHLiveSample("css-examples/grid/masonry/justify-tracks.html", '100%', 1000)}}

## Fallback

In browsers [that do not support masonry](#browser_compatibility), regular grid auto-placement will be used instead.
Expand Down
82 changes: 0 additions & 82 deletions files/en-us/web/css/justify-tracks/index.md

This file was deleted.

4 changes: 0 additions & 4 deletions files/en-us/web/css/masonry-auto-flow/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,3 @@ selectElem.addEventListener("change", changeMasonryFlow);
## Browser compatibility

{{Compat}}

## See also

- Related CSS properties: {{cssxref("align-tracks")}}, {{cssxref("justify-tracks")}}