Andreas Reinhold / reiniandClaude Opus 5
acd6ba21ae
Plan step 35: <x-feed min-item gap>, following the reference's feed rules - one column below medium, then as many equal columns of at least the minimum item width as the feed has room for, 24px apart from medium, items in their source order. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
50 lines
2.2 KiB
CSS
50 lines
2.2 KiB
CSS
/*
|
||
* <x-feed>: M3's feed canonical layout — cards or items in a grid that adds columns as it widens.
|
||
*
|
||
* Its rules across breakpoints, row by row (docs/reference/m3/foundations-supplement.md § Canonical
|
||
* layouts → Feed):
|
||
*
|
||
* Compact (below 600px) "stack vertically, one card per row, full pane width"
|
||
* Medium (600–839) "multiple equal-width columns"
|
||
* Expanded, large, extra-large "more columns than medium", each usually wider as it grows
|
||
*
|
||
* So below 600px the feed is one column. From 600px it is equal columns of at least
|
||
* `--md-min-item` (written inline on every feed, 240px unless the caller says otherwise, so a feed
|
||
* never inherits another's): as many as fit in the room the feed has, which is more on a wider
|
||
* window, and each column widens until the next one fits. M3 gives no minimum width or column
|
||
* count for the web ("no explicit numeric column-count or gutter table", docs/reference/m3/
|
||
* foundations.md § Layout → Grids & spacing); the minimum is the package's, and a feed inside a
|
||
* narrow pane stays one column where a window-keyed count would crush it. The space between items
|
||
* is M3's spacer, 16px on a compact window and 24px from medium (§ Breakpoints), unless
|
||
* `data-md-gap` names a spacing token. Items keep their source order — M3: "item order is
|
||
* determined by position" — and no dense packing reorders them. Columns run in the inline
|
||
* direction, so a right-to-left document fills them from the right.
|
||
*
|
||
* In `material.layout`; `hide-below`/`hide-from` come from visibility.css.
|
||
*/
|
||
|
||
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
||
|
||
@import './spacing.css';
|
||
@import './visibility.css';
|
||
|
||
@layer material.layout {
|
||
:where([data-md-feed]) {
|
||
--md-gap: var(--md-sys-measurement-space200);
|
||
|
||
@media (width >= 600px) {
|
||
--md-gap: var(--md-sys-measurement-space300);
|
||
}
|
||
}
|
||
|
||
[data-md-feed] {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--md-gap);
|
||
|
||
@media (width >= 600px) {
|
||
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--md-min-item, 240px)), 1fr));
|
||
}
|
||
}
|
||
}
|