【免费下载链接】oatUltra-lightweight, zero dependency, semantic HTML, CSS, JS UI library. ~10KB mingz.项目地址https://gitcode.com/gh_mirrors/oat5/oat点击查看免费下载Oat 是一个极轻量、零依赖的语义化 HTML/CSS/JS UI 组件库其栅格系统Grid提供了一套基于 CSS Grid 的 12 列响应式布局方案。本文以 docs/content/components/grid.md 为骨架结合 src/css/grid.css 源码逐行剖析.container、.row、.col-{n}、.offset-{n}与.col-end的用法与底层实现让你读完即可在 Oat 项目中快速搭建页面布局并掌握如何通过 CSS 变量自定义栅格行为。栅格系统速览Oat 的栅格系统由三个层次构成.container居中的内容容器负责限制页面宽度并控制左右内边距.row一行栅格轨道使用 CSS Grid 的grid-template-columns: repeat(12, 1fr)切分 12 等份.col-{n}列单元通过n112指定该列在行内占据的轨道数量。官方文档原文grid.md对它的定义是A 12-column grid system using CSS grid. Use.container,.row, and.colclasses. Column widths use.col-{n}where n is 1-12.——即整套系统完全建立在原生 CSS Grid 之上不依赖任何 JavaScript也不引入框架级的栅格生成代码。引入方式Oat 的 CSS 通过 npm 包knadh/oat分发见 package.json或直接以 CDN 方式引入详见 docs/content/usage.mdlink relstylesheet hrefhttps://unpkg.com/knadh/oat/oat.min.css本地开发时栅格样式位于源码的 src/css/grid.css并由 Makefile 中的css目标将其与其余组件样式按固定顺序合并、压缩为dist/oat.min.cssgrid.css位于table.css与card.css之间。由于栅格只涉及样式、不涉及交互使用它无需引入oat.min.js这一点与 Oat 中多数动态组件如 toast、dropdown不同。基础用法container / row / col栅格的最小结构如下div classcontainer div classrow div classcol-4col-4/div div classcol-4col-4/div div classcol-4col-4/div /div /div这会在页面内生成一行三列的布局每列恰好占据 12 列中的 4 列。列数之和不超过 12 时各列按序排列不足 12 时右侧留白。官方示例全集grid.md 给出了覆盖等分、不对称、偏移与右对齐等典型场景的完整示例以下代码可直接复制运行demo-grid仅为演示页的着色辅助类实际项目中可去掉div classcontainer demo-grid div classrow div classcol-4col-4/div div classcol-4col-4/div div classcol-4col-4/div /div div classrow div classcol-6col-6/div div classcol-6col-6/div /div div classrow div classcol-3col-3/div div classcol-6col-6/div div classcol-3col-3/div /div div classrow div classcol-4 offset-2col-4 offset-2/div div classcol-4col-4/div /div div classrow div classcol-8col-8/div div classcol-3 offset-1col-3 offset-1/div /div div classrow div classcol-3col-3/div div classcol-4 col-endcol-4 col-end/div /div /div其中四行依次演示了三等分col-4× 3总宽 12二等分col-6× 2各占半行对称布局col-3col-6col-3中间内容区加宽偏移列col-4 offset-2将首列向右推 2 格再接一个col-4不对称 偏移col-8打头col-3 offset-1从末尾侧开始实际总占用 8 1 3 12右对齐收尾col-3在前col-4 col-end被钉在行的最右端。列宽与偏移的类名清单类名作用取值范围.container居中定宽容器宽度由--container-max决定.row12 列栅格轨道—.col-1~.col-12指定列跨度n∈ [1, 12].offset-1~.offset-6列左侧偏移n∈ [1, 6].col-end将列对齐到行尾与col-{n}组合使用需要说明的是偏移类目前只提供了 16 六档见 src/css/grid.css而不是与列宽对称的 111 档若需要 7 格以上的偏移可在自己的样式表中为.offset-7等自定义类设置--offset变量机制见下文源码级原理。源码级原理CSS 变量驱动的列与偏移Oat 栅格没有采用为每个断点生成一打媒体查询类的经典做法而是用一套极简的 CSS 自定义属性完成了列跨度与偏移的组合。核心实现集中在 src/css/grid.css:root { --grid-cols: 12; --grid-gap: 1.5rem; --container-max: 1280px; --container-pad: 1rem; } .row { display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr); gap: var(--grid-gap); width: 100%; }列跨度--span的叠加每一列的跨度并不直接写死为grid-column: span 4而是通过--span变量间接表达.col, [class*col-] { grid-column-end: span calc(var(--span, var(--grid-cols)) var(--offset, 0)); } .col-1 { --span: 1; } /* ... */ .col-12 { --span: 12; }col-{n}类只负责设置--span变量而真正的跨度计算集中在统一定义里grid-column-end: span calc(var(--span) var(--offset))。这意味着偏移量被合并进了网格跨度计算——一个col-4 offset-2的元素实际在网格上占用 6 个轨道4 列内容 2 列空白从而保证偏移不会破坏 12 列的对齐节奏。不带数字的裸.col类默认取--span: var(--grid-cols)即占满整行 12 列等价于col-12。偏移margin 公式与 CSS Grid 的配合既然偏移已计入grid-column-end的 span为什么还需要额外的margin-inline-start看这段源码[class*offset-] { margin-inline-start: calc(var(--offset) * (100% var(--grid-gap)) / (var(--span) var(--offset))); }该公式把单列轨道宽度 间隙作为基准宽度(100% gap) / (span offset)再乘以偏移格数--offset得到的左边距恰好等于 n 个轨道加间隙的总宽度。这样偏移列在网格中占据的轨道与视觉上被推开的距离完全一致无论栅格总宽或列数如何变化都能保持精确对齐——这是整个系统最精妙的一处设计。右对齐.col-end.col-end { grid-column-start: span var(--span, 1); grid-column-end: -1; }.col-end使用 CSS Grid 的负索引-1即最后一条网格线作为grid-column-end让列被钉在行的右端配合col-{n}时--span决定该列从右侧向左占用的轨道数。例如col-4 col-end表示从右端向左占据 4 列实现单侧顶格的效果无需手动数偏移值。移动端降级在max-width: 768px媒体查询内src/css/grid.css栅格自动切换为4 列模式media (max-width: 768px) { .row { --grid-cols: 4; --grid-gap: 1rem; } .col, [class*col-] { --span: 4; } [class*offset-] { --offset: 0; margin-inline-start: 0; } }三个动作同时发生轨道数从 12 降到 4间隙从1.5rem收紧到1rem所有列包括col-1col-12统一回退为--span: 4即占满整行、纵向堆叠避免小屏上列宽过窄所有偏移类归零偏移边距重置为 0。效果是桌面端 12 列精细排版手机端自动折叠为单列流式布局全程无需添加任何断点类。值得注意的是官方文档元数据中描述为 using container queries但从 src/css/grid.css 的实际实现看响应式切换目前由传统media媒体查询完成。自定义栅格覆盖四个 CSS 变量栅格的四个设计参数全部暴露为:root上的 CSS 自定义属性src/css/grid.css你可以在自己的样式表中直接覆盖无需改动源码:root { --grid-cols: 12; /* 栅格总列数默认 12 */ --grid-gap: 1.5rem; /* 列间隙默认 1.5rem */ --container-max: 1280px; /* 容器最大宽度默认 1280px */ --container-pad: 1rem; /* 容器左右内边距默认 1rem */ }例如改成 16 列栅格将--grid-cols: 16即可此时col-4等价于原系统的三分之一宽调整--grid-gap可全局改变列间距而无需触碰任何col-*类。Oat 的文档演示站也在 docs/static/demo.css 中把.container的max-width覆盖为 1200px 以适配演示页面说明这套变量在业务项目中按需覆写是完全常规的做法。实战组合用 Grid 拼装指标卡片栅格很少单独使用Oat 官方在 docs/content/recipes.md 的 Stats cards 一节演示了如何用grid、card、badge、progress组合出仪表盘指标区div classcontainer div classrow article classcard col-4 header classhstack justify-between items-center h4Revenue/h4 span classbadge>赞分享【免费下载链接】oatUltra-lightweight, zero dependency, semantic HTML, CSS, JS UI library. ~10KB mingz.项目地址https://gitcode.com/gh_mirrors/oat5/oat点击查看免费下载相关推荐Basscss Grid 模块实战基于 12 列浮动系统的响应式栅格布局Basscss Grid 模块实战基于 12 列浮动系统的响应式栅格布局 本文以 Basscss 的 modules/grid 模块文档为主体系统讲解如何用前端设计系统Naive UI 栅格Grid组件完全指南基于 CSS Grid 的响应式布局系统Naive UI 栅格Grid组件完全指南基于 CSS Grid 的响应式布局系统 Naive UI 的 n grid / n grid item 是一套前端UI组件rsuite Grid 栅格系统实战从 24 列基础布局到响应式断点rsuite Grid 栅格系统实战从 24 列基础布局到响应式断点 导读 rsuite 的 Grid 组件提供了一套基于 24 列栅格 的响应式布局系统由前端UI组件上一篇如何高效开发Asynq中间件扩展Go分布式任务队列的终极指南下一篇Rampart的未来发展隐私保护技术的演进路线图创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
