Elite Layouts 是一套现代 CSS 布局模式参考，定位为打造高端、获奖级网页体验的布局方案集合。资料以快速参考表的形式组织内容，各主题对应独立参考文件：Bento Grids（bento-grids.md）、Horizontal Scroll（horizontal-scroll.md）、Sticky & Parallax（sticky-parallax.md）、Container Queries（container-queries.md）、Editorial patterns（editorial-patterns.md）。
一、用途与布局选择框架 资料提供按项目类型的布局决策框架：作品集（Portfolio）以 Bento + 横向滚动为主，用于展示作品与案例研究；电商（E-commerce）以容器查询为主，用于商品网格与响应式卡片；登陆页（Landing page）采用粘性视差，构建 Hero → Features → CTA 的流程；仪表盘（Dashboard）采用 Bento + 容器查询，用于可调整面板与小组件；博客/杂志采用非对称网格，营造编辑感与视觉层级；代理机构（Agency）采用横向滚动 + Bento，追求沉浸式与探索性。模式选择上：需要自适应组件用容器查询；需要视觉趣味与变化用 Bento 网格；需要沉浸式叙事用横向滚动；需要纵深与分层用粘性视差；若全部需要则可策略性组合。
二、主要能力与核心网格系统 资料给出 12 栏基础栅格实现，通过 CSS 自定义属性定义栏数、间隙与边距，并使用 clamp() 实现流式值，同时提供全出血（full-bleed）与内容宽度项的命名网格线定位。还包含列跨度（col-span-1 至 col-span-12）与行跨度（row-span-2、row-span-3）工具类，以及移动端媒体查询下跨度的响应式调整。
三、四种核心模式 Bento 网格：以 repeat(4, 1fr) 与 grid-auto-rows: minmax(200px, auto) 为基础，提供 featured（跨 2 列 2 行）、tall（跨 2 行）、wide（跨 2 列）等条目类型，并在 768px 以下切换为 2 列布局。 横向滚动：提供纯 CSS 的 scroll-snap 方案（scroll-snap-type: x mandatory、隐藏滚动条、每节 100vw 宽 100vh 高）以及 GSAP ScrollTrigger 的固定（pin）滚动实现。 粘性视差：提供 CSS position: sticky 分区堆叠方案（配合 z-index 分层）与 GSAP pin + 时间线动画方案。 容器查询：通过 container-type: inline-size 和 container-name 定义包含上下文，使用 @container 在 400px、600px 等宽度条件下调整卡片方向、间距与字号。
四、布局与动画集成 资料包含滚动驱动动画的渐进增强写法：通过 @supports (animation-timeline: view()) 与 prefers-reduced-motion 双重保护，避免在不支持或减少动效时元素停留于 opacity: 0。还提供 GSAP 网格交错动画（含 stagger 的 grid: "auto"）以及 FLIP 布局变更动画（Flip.getState / Flip.from）。
五、响应式与内容感知策略 包含移动优先断点（1 列 → 2 列 → 3 列 → 4 列）、无断点流式网格（auto-fit + minmax + clamp 间距）以及基于 :has() 的内容感知布局，包括数量查询（按子元素数量重组网格）、按是否含 figure 生成侧栏、空状态折叠等。资料注明 :has() 自 2023 年末起已跨主流浏览器 Baseline，无需回退。
六、常见布局模式 涵盖 Hero + 内容网格、侧边栏 + 主内容（含移动端抽屉式侧栏）、瀑布流。瀑布流部分说明原生 masonry 仍在演进：Safari 26.4 率先支持（2026），Chrome 与 Firefox 处于标志位之后；语法仍在 grid-template-rows: masonry 与更新的 display: grid-lanes / Item Flow 提案之间变化，因此建议特性检测而非版本嗅探，并保留生产可用的 JS 回退方案（固定行高 + JS 计算跨度）。
七、性能与可访问性 性能方面给出布局隔离（contain: layout style、contain: strict、content-visibility: auto、contain-intrinsic-size）以及避免布局抖动（先批量读取再写入）的做法，并附 CSS Grid 与 Flexbox 的适用场景对照表。可访问性方面包含横向区块的跳过链接、横向滚动容器的方向键导航、通过 live region 播报布局变更（如筛选后显示数量），以及阅读顺序同步问题：当网格定位改变项目的视觉顺序时，键盘与屏幕阅读器仍按源码顺序，属于 WCAG 2.4.3 聚焦顺序失败，建议保持 DOM 顺序与主要视觉顺序一致；reading-flow: grid-order 可作为渐进增强（Chrome 137+，2026 年仅限 Chromium），不能替代合理的源码顺序。
八、参考资源 资料列出 MDN 的 CSS Grid、容器查询、CSS 轮播、滚动驱动动画、原生 masonry 布局、:has() 选择器文档，Chrome 关于 reading-flow 聚焦顺序的说明，以及 CSS Tricks Grid Guide 与 GSAP ScrollTrigger。
限制与缺失：资料未提供收录来源、价格、收费、平台支持范围或安装方式等信息，这些内容暂未提供。