stylegallery 0.1.0

package/patterns/grid-repetition/card-grid.md

@@ -0,0 +1,88 @@
+---
+type: Layout Pattern
+name: card-grid
+title: card-grid
+category: Grid / Repetition
+description: Align repeating cards in rows and columns.
+primary_spatial_problem: Align repeating cards in rows and columns.
+secondary_spatial_problems: none
+layout_axis: both
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# card-grid
+
+## When To Use
+
+Use this pattern when you need to align repeating cards in rows and columns.
+
+## HTML
+
+```html
+<section class="card_grid" aria-label="Project cards">
+    <article>Design audit</article>
+    <article>Analytics migration</article>
+    <article>Onboarding rewrite</article>
+</section>
+```
+
+## CSS
+
+```css
+.card_grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `grid-template-columns` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `grid-template-columns` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `card_grid` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Grid / Repetition patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/grid-repetition/columns.md

@@ -0,0 +1,87 @@
+---
+type: Layout Pattern
+name: columns
+title: columns
+category: Grid / Repetition
+description: Flow long content into balanced text columns.
+primary_spatial_problem: Flow long content into balanced text columns.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# columns
+
+## When To Use
+
+Use this pattern when you need to flow long content into balanced text columns.
+
+## HTML
+
+```html
+<article class="columns" aria-labelledby="columns-heading">
+    <h2 id="columns-heading">Release notes</h2>
+    <p>Several short updates can flow into balanced columns when there is room.</p>
+    <p>When the container narrows, the same content returns to a single column.</p>
+</article>
+```
+
+## CSS
+
+```css
+.columns {
+    column-gap: 2rem;
+    columns: 18rem;
+}
+```
+
+## Core Properties
+
+- `column-gap`, `columns` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `column-gap`, `columns` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `columns` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Grid / Repetition patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/grid-repetition/dense-grid.md

@@ -0,0 +1,88 @@
+---
+type: Layout Pattern
+name: dense-grid
+title: dense-grid
+category: Grid / Repetition
+description: Fill a compact grid with repeated small items.
+primary_spatial_problem: Fill a compact grid with repeated small items.
+secondary_spatial_problems: none
+layout_axis: both
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# dense-grid
+
+## When To Use
+
+Use this pattern when you need to fill a compact grid with repeated small items.
+
+## HTML
+
+```html
+<section class="dense_grid" aria-label="Keyboard shortcuts">
+    <kbd>Cmd K</kbd>
+    <kbd>Cmd Shift P</kbd>
+    <kbd>Esc</kbd>
+</section>
+```
+
+## CSS
+
+```css
+.dense_grid {
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `grid-template-columns` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `grid-template-columns` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `dense_grid` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Grid / Repetition patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/grid-repetition/grid-wrapper.md

@@ -0,0 +1,89 @@
+---
+type: Layout Pattern
+name: grid-wrapper
+title: grid-wrapper
+category: Grid / Repetition
+description: Center grid tracks while allowing full-width breakout tracks.
+primary_spatial_problem: Center grid tracks while allowing full-width breakout tracks.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# grid-wrapper
+
+## When To Use
+
+Use this pattern when you need to center grid tracks while allowing full-width breakout tracks.
+
+## HTML
+
+```html
+<section class="grid_wrapper" aria-label="Marketing page">
+    <main class="grid_wrapper_main">Centered campaign copy</main>
+</section>
+```
+
+## CSS
+
+```css
+.grid_wrapper {
+    display: grid;
+    grid-template-columns: 1fr minmax(0, 64rem) 1fr;
+}
+
+.grid_wrapper_main {
+    grid-column: 2;
+}
+```
+
+## Core Properties
+
+- `display`, `grid-template-columns`, `grid-column` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `grid-template-columns`, `grid-column` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `grid_wrapper` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Grid / Repetition patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/grid-repetition/index.md

@@ -0,0 +1,12 @@
+# Grid / Repetition
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+- [ram-grid](ram-grid.md) - Repeat items into as many useful columns as space allows.
+- [card-grid](card-grid.md) - Align repeating cards in rows and columns.
+- [twelve-span-grid](twelve-span-grid.md) - Provide a twelve-column placement scaffold.
+- [page-grid](page-grid.md) - Align page content to margins, gutters, and a central track.
+- [grid-wrapper](grid-wrapper.md) - Center grid tracks while allowing full-width breakout tracks.
+- [columns](columns.md) - Flow long content into balanced text columns.
+- [dense-grid](dense-grid.md) - Fill a compact grid with repeated small items.
+- [masonry-approx](masonry-approx.md) - Approximate staggered content with columns when exact row alignment is not needed.

package/patterns/grid-repetition/masonry-approx.md

@@ -0,0 +1,87 @@
+---
+type: Layout Pattern
+name: masonry-approx
+title: masonry-approx
+category: Grid / Repetition
+description: Approximate staggered content with columns when exact row alignment is not needed.
+primary_spatial_problem: Approximate staggered content with columns when exact row alignment is not needed.
+secondary_spatial_problems: none
+layout_axis: block
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# masonry-approx
+
+## When To Use
+
+Use this pattern when you need to approximate staggered content with columns when exact row alignment is not needed.
+
+## HTML
+
+```html
+<section class="masonry_approx" aria-label="Research notes">
+    <article>Interview excerpt with a longer observation.</article>
+    <article>Short survey result.</article>
+    <article>Workshop synthesis note.</article>
+</section>
+```
+
+## CSS
+
+```css
+.masonry_approx {
+    column-gap: 1rem;
+    column-width: 14rem;
+}
+```
+
+## Core Properties
+
+- `column-gap`, `column-width` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `column-gap`, `column-width` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `masonry_approx` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Grid / Repetition patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/grid-repetition/page-grid.md

@@ -0,0 +1,90 @@
+---
+type: Layout Pattern
+name: page-grid
+title: page-grid
+category: Grid / Repetition
+description: Align page content to margins, gutters, and a central track.
+primary_spatial_problem: Align page content to margins, gutters, and a central track.
+secondary_spatial_problems: none
+layout_axis: inline
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://carbondesignsystem.com/elements/2x-grid/overview/
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# page-grid
+
+## When To Use
+
+Use this pattern when you need to align page content to margins, gutters, and a central track.
+
+## HTML
+
+```html
+<section class="page_grid" aria-label="Article page">
+    <main class="page_grid_content">Centered article track with fluid outer gutters</main>
+</section>
+```
+
+## CSS
+
+```css
+.page_grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(1rem, 1fr) minmax(0, 72rem) minmax(1rem, 1fr);
+}
+
+.page_grid_content {
+    grid-column: 2;
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `grid-template-columns`, `grid-column` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `grid-template-columns`, `grid-column` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `page_grid` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Grid / Repetition patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.

package/patterns/grid-repetition/ram-grid.md

@@ -0,0 +1,88 @@
+---
+type: Layout Pattern
+name: ram-grid
+title: ram-grid
+category: Grid / Repetition
+description: Repeat items into as many useful columns as space allows.
+primary_spatial_problem: Repeat items into as many useful columns as space allows.
+secondary_spatial_problems: none
+layout_axis: both
+content_shape: mixed
+responsiveness: fluid
+constraints: Uses only local class hooks and explicit layout constraints.
+scroll_ownership: No internal scroll container.
+source_lineage: https://web.dev/articles/one-line-layouts
+lifecycle: generated
+generated_from: scripts/generate-patterns.mjs, scripts/pattern-data.mjs
+---
+
+<!-- Generated from `scripts/generate-patterns.mjs` and `scripts/pattern-data.mjs`. Do not hand-edit generated catalog or pattern docs; edit the source files and regenerate. -->
+
+# ram-grid
+
+## When To Use
+
+Use this pattern when you need to repeat items into as many useful columns as space allows.
+
+## HTML
+
+```html
+<section class="ram_grid" aria-label="Photo albums">
+    <article>Spring launch album</article>
+    <article>Customer meetup album</article>
+    <article>Workshop album</article>
+</section>
+```
+
+## CSS
+
+```css
+.ram_grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
+}
+```
+
+## Core Properties
+
+- `display`, `gap`, `grid-template-columns` define the spatial behavior for this pattern.
+
+## Properties That Break The Layout If Removed
+
+- Removing `display`, `gap`, `grid-template-columns` changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.
+
+## Constraints And Change Points
+
+- fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
+- Keep the HTML class hooks and CSS selectors in one-to-one agreement.
+
+## Scroll Ownership
+
+No internal scroll container.
+
+## Accessibility And Source Order Notes
+
+- Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
+- DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
+- Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
+- Scroll expectation: No internal scroll container.
+- Cognitive risk: Low: the pattern should preserve ordinary reading flow when semantic order is already correct.
+
+## Browser And Fallback Notes
+
+The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.
+
+## Composition Notes
+
+Use `ram_grid` as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.
+
+## Anti-patterns
+
+- Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
+- Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.
+
+## IA Navigation
+
+Parent: [Grid / Repetition patterns](index.md) in [Pattern Categories](../index.md).
+Next: [Layout Recipes](../../recipes/index.md) for screen-level composition, or return to the [Layout Pattern Catalog](../../CATALOG.md) when choosing another primitive.