Yeti Breakout 布局让图片与引言从居中的阅读栏中“破栏而出”【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti导读在长文页面里正文需要一个窄到舒适的阅读栏但偶尔的整幅图片、引言带或代码块又希望顶到页面边缘——Yeti 的breakout布局正是为此设计的它把子元素约束在带两侧留白的居中阅读栏内任何携带data-bleed的子元素则横向跨越整个容器且完全不打断文档流。读完本文你将掌握breakout的网格原理、data-max/data-gap属性取值、data-bleed与data-note边注的完整用法并能依据源码与测试用例理解其行为边界。本文基于仓库中的 docs/breakout.md 与对应实现展开。什么时候用它Breakout 天生服务于长文型页面一篇深度文章、一个案例研究、一份文档。正文文本被收窄到易于阅读的栏宽而偶发的图片、引言带或代码块可以“破栏”铺满全宽却不必离开正常的文档流——不需要负外边距也不需要破坏布局的手工 hack。它是 Yeti 中与container、stack等布局配合使用频率最高的“阅读体验”布局之一。最小示例文档给出的标准用法如下完整可运行版本见 src/layouts/breakout/example.htmlarticle classbreakout h1A long read/h1 pThe column keeps every paragraph at a readable width./p img srcvalley.jpg altA valley at dusk, edge to edge>.breakout { display: grid; container-type: inline-size; grid-template-columns: [full-start] minmax(var(--_yeti-gap), 1fr) [content-start] min(100% - 2 * var(--_yeti-gap), var(--_yeti-max)) [content-end] minmax(var(--_yeti-gap), 1fr) [full-end]; row-gap: var(--_yeti-gap); } .breakout * { margin: 0; grid-column: content; } .breakout [data-bleed] { grid-column: full; }四个命名网格线把容器划分为三段左 gutterminmax(var(--_yeti-gap), 1fr)至少一个 gap 宽可自由伸展阅读栏min(100% - 2 * var(--_yeti-gap), var(--_yeti-max))取“容器宽度减去两个 gutter”与“--_yeti-max上限”两者中的较小值右 gutter与左 gutter 对称。由于两个 gutter 都是1fr且阅读栏被min()约束剩余空间会均分给两侧 gutter阅读栏因此总是水平居中。普通子元素通过grid-column: content落在中轨携带data-bleed的子元素改用grid-column: full横跨全部三轨即容器整宽。测试 test/browser/layouts/breakout.spec.js 恰好验证了这三件事普通子元素宽度等于--yeti-width-md且左右留白对称、出血元素宽度等于容器宽度、行间距等于--yeti-space-md。几点实现细节值得注意外边距清零margin: 0作用于所有直接子元素行间距完全由row-gap承担。这与 Yeti 所有基于 gap 的布局一致见 src/base/prose.css 中“布局用自己的 gap 取代流程外边距”的注释。行间距即 gutterrow-gap: var(--_yeti-gap)意味着同一个data-gap同时控制两侧 gutter 与子元素之间的纵向间距视觉上留白是统一的。容器查询container-type: inline-size让breakout成为一个容器查询上下文这是边注data-note在宽窄视口间切换位置的前提。data-bleed破栏而出的子元素任何直接子元素图片、blockquote、代码块、横幅等只要带上data-bleed就会从阅读栏“跨到”整宽。文档强调它依然停留在正常的文档流中先前的段落、出血元素、后续段落仍按顺序逐行排列只是该元素的行宽变成了容器全宽。因此文档将其定义为“不离开流式布局的破栏”。data-note宽屏下的页边注data-note是 breakout 独有的第三种子角色——页边注margin note。文档的描述与源码 src/layouts/breakout/breakout.css 完全对应div classbreakout contenteditable="false">【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考