From c9f5c4f0f59be5453700130240ac74938430fbf3 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Wed, 19 Jun 2024 15:29:39 +0100 Subject: [PATCH 1/2] removed a-tracks & j-tracks pages and references from the masonry layout page --- files/en-us/_redirects.txt | 2 + files/en-us/_wikihistory.json | 8 -- files/en-us/web/css/align-tracks/index.md | 82 ------------------- .../css_grid_layout/masonry_layout/index.md | 20 +---- files/en-us/web/css/justify-tracks/index.md | 82 ------------------- 5 files changed, 3 insertions(+), 191 deletions(-) delete mode 100644 files/en-us/web/css/align-tracks/index.md delete mode 100644 files/en-us/web/css/justify-tracks/index.md diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 1c7e626a6bdfe06..4a6aef96b64f6ba 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -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 @@ -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 diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 1b8ededdc0edea8..84704d85679df06 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -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": [ @@ -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": [ diff --git a/files/en-us/web/css/align-tracks/index.md b/files/en-us/web/css/align-tracks/index.md deleted file mode 100644 index be871578599b8aa..000000000000000 --- a/files/en-us/web/css/align-tracks/index.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: align-tracks -slug: Web/CSS/align-tracks -page-type: css-property -status: - - experimental -browser-compat: css.properties.align-tracks ---- - -{{CSSRef}}{{SeeCompatTable}} - -The **`align-tracks`** [CSS](/en-US/docs/Web/CSS) property sets the alignment in the masonry axis for grid containers that have [masonry](/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout) in their block axis. - -## Syntax - -```css -/* Keyword values */ -align-tracks: start; -align-tracks: space-between; -align-tracks: center; -align-tracks: start, center, end; - -/* Global values */ -align-tracks: inherit; -align-tracks: initial; -align-tracks: revert; -align-tracks: revert-layer; -align-tracks: unset; -``` - -The property can take a single value, in which case all tracks are aligned in the same way. If a list of values is used then the first value applies to the first track in the grid axis, the second to the next and so on. - -If there are fewer values than tracks, the last value is used for all remaining tracks. If there are more values than tracks, any additional values are ignored. - -### Values - -- `start` - - : The items are packed flush to each other toward the start edge of the alignment container in the masonry axis. -- `end` - - : The items are packed flush to each other toward the end edge of the alignment container in the masonry axis. -- `center` - - : The items are packed flush to each other toward the center of the alignment container along the masonry axis. -- `normal` - - : Acts as `start`. -- `baseline first baseline` - `last baseline` - - : Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. - The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`. -- `space-between` - - : The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge. -- `space-around` - - : The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items. -- `space-evenly` - - : The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. -- `stretch` - - : The items stretch along the masonry axis to fill the content box. Items with definite size do not stretch. - -## Formal definition - -{{cssinfo}} - -## Formal syntax - -{{csssyntax}} - -## Examples - -### Masonry layout with multiple values for align-tracks - -{{EmbedGHLiveSample("css-examples/grid/masonry/align-tracks.html", '100%', 900)}} - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- Related CSS properties: {{cssxref("justify-tracks")}}, {{cssxref("masonry-auto-flow")}} diff --git a/files/en-us/web/css/css_grid_layout/masonry_layout/index.md b/files/en-us/web/css/css_grid_layout/masonry_layout/index.md index cda0b9ab1bac23e..60b473f24ec983f 100644 --- a/files/en-us/web/css/css_grid_layout/masonry_layout/index.md +++ b/files/en-us/web/css/css_grid_layout/masonry_layout/index.md @@ -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. diff --git a/files/en-us/web/css/justify-tracks/index.md b/files/en-us/web/css/justify-tracks/index.md deleted file mode 100644 index 61fc18af271352c..000000000000000 --- a/files/en-us/web/css/justify-tracks/index.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: justify-tracks -slug: Web/CSS/justify-tracks -page-type: css-property -status: - - experimental -browser-compat: css.properties.justify-tracks ---- - -{{CSSRef}}{{SeeCompatTable}} - -The **`justify-tracks`** [CSS](/en-US/docs/Web/CSS) property sets the alignment in the masonry axis for grid containers that have [masonry](/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout) in their inline axis. - -## Syntax - -```css -/* Keyword values */ -justify-tracks: start; -justify-tracks: space-between; -justify-tracks: center; -justify-tracks: start, center, end; - -/* Global values */ -justify-tracks: inherit; -justify-tracks: initial; -justify-tracks: revert; -justify-tracks: revert-layer; -justify-tracks: unset; -``` - -The property can take a single value, in which case all tracks are aligned in the same way. If a list of values is used then the first value applies to the first track in the grid axis, the second to the next, and so on. - -If there are fewer values than tracks, the last value is used for all remaining tracks. If there are more values than tracks, any additional values are ignored. - -### Values - -- `start` - - : The items are packed flush to each other toward the start edge of the alignment container in the masonry axis. -- `end` - - : The items are packed flush to each other toward the end edge of the alignment container in the masonry axis. -- `center` - - : The items are packed flush to each other toward the center of the alignment container along the masonry axis. -- `normal` - - : Acts as `start`. -- `space-between` - - : The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge. -- `space-around` - - : The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items. -- `space-evenly` - - : The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. -- `stretch` - - : The items stretch along the masonry axis to fill the content box. Items with definite size do not stretch. -- `left` - - : The items are packed flush to each other toward the left edge of the alignment container. -- `right` - - : The items are packed flush to each other toward the right edge of the alignment container. - -## Formal definition - -{{cssinfo}} - -## Formal syntax - -{{csssyntax}} - -## Examples - -### Masonry layout with multiple values for justify-tracks - -{{EmbedGHLiveSample("css-examples/grid/masonry/justify-tracks.html", '100%', 1000)}} - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- Related CSS properties: {{cssxref("align-tracks")}}, {{cssxref("masonry-auto-flow")}} From 2ab8fa0e1ac2d133a8faf0762b52894277dc52e0 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Wed, 19 Jun 2024 15:32:26 +0100 Subject: [PATCH 2/2] removed the references to a-tracks & j-tracks from other pages --- files/en-us/glossary/alignment_container/index.md | 2 -- files/en-us/web/css/css_grid_layout/index.md | 2 -- files/en-us/web/css/masonry-auto-flow/index.md | 4 ---- 3 files changed, 8 deletions(-) diff --git a/files/en-us/glossary/alignment_container/index.md b/files/en-us/glossary/alignment_container/index.md index 31862310641a889..ccc00b3cbff3bbb 100644 --- a/files/en-us/glossary/alignment_container/index.md +++ b/files/en-us/glossary/alignment_container/index.md @@ -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 diff --git a/files/en-us/web/css/css_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/index.md index 1f8244a449bfd9e..2c152d258152804 100644 --- a/files/en-us/web/css/css_grid_layout/index.md +++ b/files/en-us/web/css/css_grid_layout/index.md @@ -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 diff --git a/files/en-us/web/css/masonry-auto-flow/index.md b/files/en-us/web/css/masonry-auto-flow/index.md index ad5605a5cd1182a..f533d8f799f5da6 100644 --- a/files/en-us/web/css/masonry-auto-flow/index.md +++ b/files/en-us/web/css/masonry-auto-flow/index.md @@ -136,7 +136,3 @@ selectElem.addEventListener("change", changeMasonryFlow); ## Browser compatibility {{Compat}} - -## See also - -- Related CSS properties: {{cssxref("align-tracks")}}, {{cssxref("justify-tracks")}}