前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载Grid 是 Metro UI CSS 中用于构建复杂响应式布局的纯 CSS 网格组件它基于 Flexbox 实现了一套 12 列栅格系统并借助 CSS 容器查询Container Queries在组件层面完成断点自适应。阅读本文后你将掌握.grid/.row/.cell的完整用法、响应式与偏移类名的取用规则、间距控制机制以及如何通过--grid-gap变量定制属于自己的网格系统。组件定位与依赖Grid 组件位于 source/components/grid/其入口文件 index.js 只有一行import ./grid.less;这说明它是一个纯 CSS 组件样式全部定义在 grid.less 中不依赖任何 JavaScript 运行时逻辑也因此没有插件参数、API 方法和事件。使用时只需引入编译后的 lib/metro.css或从 source 自行编译即可直接使用全部网格类名。快速上手基础网格布局网格的基本结构是三层嵌套.grid容器 →.row行 →.cell-*单元格。以cell-6为例数字代表该单元格占据 12 列中的 6 列即一半宽度div classgrid div classrow div classcell-6Half width column/div div classcell-6Half width column/div /div div classrow div classcell-4One third/div div classcell-4One third/div div classcell-4One third/div /div /div在 examples/grid.html 与 examples/grid-new.html 两个示例页面中可以看到完整的实战用法12 个cell-sm-1拼满一行、cell-md-one-third三等分、cell-md-one-fifth五等分、cell-3 offset-md-6组合等。列宽计算原理从源码看 12 列是如何算出来的grid.less顶部定义了一个关键常量gridCellBaseSize: 8.333335%;这是 100% ÷ 12 的近似值即每一列的基准宽度。随后通过 Less 的each(range(0, 12))循环批量生成所有列宽类each(range(0, 12), .(k) { .cell-{k}, .col-{k} { flex: 0 0 calc(gridCellBaseSize * k - var(--grid-gap)); max-width: calc(gridCellBaseSize * k - var(--grid-gap)); } .offset-{k} { margin-left: calc(gridCellBaseSize * k); } })由源码可以推断出三个重要细节宽度 列基准 × 列数 − 间距cell-6的实际宽度为8.333335% × 6 − var(--grid-gap)间距被从单元格宽度中扣除从而保证列与列之间在 flex 布局中不会因gap而溢出换行。偏移只加列宽、不减间距offset-3的margin-left为8.333335% × 3恰好推过 3 列的位置。.row *默认占满整行未指定列宽的任意子元素默认flex: 0 0 100%即一行一个只有显式添加cell-*类才会进入多列排布。自动宽度与弹性列当你不希望使用固定列数时可以用以下两类单元格div classgrid div classrow div classcell-autoAuto width (takes only needed space)/div div classcellFlexible width (takes remaining space)/div /div /div.cell-auto/.col-autoflex: 0 0 auto; width: auto; max-width: none宽度由内容撑开只占所需空间.cell/.colflex-basis: 0; flex-grow: 1弹性分配行内剩余空间。源码中.cell-auto, .col-auto, .v-cell-auto, .v-col-auto四个类共用同一组声明grid.lessv-前缀类与无前缀类等价可视为同一能力的别名。响应式网格基于容器查询的断点机制这是 Grid 组件最值得关注的实现特性。README 中列举了xs / sm / md / lg / xl / xxl六个断点而 vars.less 中实际定义的断点更为完整断点生效宽度断点生效宽度fs0lg992pxxs360pxxl1200pxsm576pxxxl1400pxld640pxxxxl2000pxmd768px与常见的媒体查询media不同grid.less中的响应式规则使用容器查询container实现each(media-rules, { container (width value) { .cell-{key}-half, .col-{key}-half { ... } each(range(1, 12), .(k) { .cell-{key}-{k}, .col-{key}-{k} { flex: 0 0 calc( gridCellBaseSize * k - var(--grid-gap) ); max-width: calc( gridCellBaseSize * k - var(--grid-gap) ); } .offset-{key}-{k} { margin-left: calc( gridCellBaseSize * k ); } }) } })容器查询的容器来自.row自身的声明grid.less.row { display: flex; flex-flow: row wrap; gap: var(--grid-gap); container-type: inline-size; container-name: row; min-width: 100%; }这意味着断点依据的是.row所在容器的内联宽度而非浏览器视口宽度——组件被嵌入任意宽度的卡片、侧栏或面板时其响应行为跟随父容器变化这正是 READMEContainer query support for component-level responsiveness容器查询支持组件级响应的含义。响应式用法示例小屏占满整行、中屏起各占一半div classgrid div classrow !-- Full width on small screens, half width on medium and up -- div classcell-12 cell-md-6Responsive column/div !-- Full width on small screens, half width on medium and up -- div classcell-12 cell-md-6Responsive column/div /div /div每一个断点都拥有与基础类一一对应的响应式版本.cell-{breakpoint}-{1-12}、.cell-{breakpoint}、.cell-{breakpoint}-auto、.offset-{breakpoint}-{1-12}以及-half、-one-fifth、-two-fifth、-three-fifth、-four-fifth分数类。列偏移精确控制起始位置偏移用于把单元格从行首推到指定列位置offset-{1-12}以列数为单位div classgrid div classrow div classcell-6 offset-3Centered column with offset/div /div div classrow div classcell-4First column/div div classcell-4 offset-4Column with offset/div /div /div第一行中cell-6 offset-3会水平居中显示第二行中第二个cell-4被offset-4推到第 5 列起始。偏移同样支持响应式版本如offset-md-6且偏移量不受--grid-gap影响源码中margin-left只乘列基准宽度。分数宽度非 12 等分场景当布局不需要按 12 等分对齐时可直接使用五等分或对半类div classgrid div classrow div classcell-one-fifth20% width/div div classcell-four-fifth80% width/div /div div classrow div classcell-two-fifth40% width/div div classcell-three-fifth60% width/div /div /div类名宽度类名宽度.cell-half/.col-half50%.cell-one-fifth/.col-one-fifth20%.cell-two-fifth/.col-two-fifth40%.cell-three-fifth/.col-three-fifth60%.cell-four-fifth/.col-four-fifth80%由源码可见分数类在响应式断点下同样可用-half为flex: 0 0 50%五等分类为flex: 0 0 calc(20% - var(--grid-gap))等。控制列间距gap 系列与 no-gap默认情况下.row使用gap: var(--grid-gap)而--grid-gap在:root上默认定义为16px。三种间距控制方式如下div classgrid !-- Default gap (16px) -- div classrow div classcell-6Column/div div classcell-6Column/div /div !-- Custom gap (8px) -- div classrow gap-2 div classcell-6Column/div div classcell-6Column/div /div !-- No gap -- div classrow no-gap div classcell-6Column/div div classcell-6Column/div /div /div.row.gap-{0-12}按 4px 步进设置间距即gap-1 4px、gap-2 8px、gap-3 12px……源码通过unit(v * 4, px)生成grid.less最终反映为行级--grid-gap覆盖.row.no-gap等价于--grid-gap: 0px完全去除列间距行与行之间同样以var(--grid-gap)作为margin-top.row .row规则因此行距与列距保持一致单元格默认padding: 0间距完全由gap承担。用 CSS 变量定制网格间距并非写死而是由变量驱动便于整体或局部定制变量默认值浅色模式深色模式说明--grid-gap16px16px网格列之间的间距在任意作用域覆盖该变量即可改变网格间距/* Custom styling example */ .my-custom-grid { --grid-gap: 24px; }div classgrid my-custom-grid div classrow div classcell-6Column/div div classcell-6Column/div /div /div由于列宽公式8.333335% × k − var(--grid-gap)和行距margin-top: var(--grid-gap)都引用该变量一处修改即可让整组网格的间距与列宽同步适配。可用 CSS 类速查表网格容器类名作用.grid主网格容器display: flex; flex-flow: column行类名作用.row行容器flex 横向换行排布.row.gap-{0-12}自定义间距gap-0 0pxgap-1 4pxgap-2 8px以此类推.row.no-gap移除列间距列类名作用.cell-{1-12}/.col-{1-12}固定列宽1–12 列.cell/.col弹性列占满剩余空间.cell-auto/.col-auto自动宽度列只占内容所需空间.offset-{1-12}列偏移1–12 列分数列.cell-one-fifth/.col-one-fifth20%、.cell-two-fifth/.col-two-fifth40%、.cell-three-fifth/.col-three-fifth60%、.cell-four-fifth/.col-four-fifth80%、.cell-half/.col-half50%。响应式列对每个断点fs / xs / sm / ld / md / lg / xl / xxl / xxxlREADME 仅列示 xs–xxl实际断点全集以 vars.less 为准提供.cell-{breakpoint}-{1-12}、.cell-{breakpoint}、.cell-{breakpoint}-auto、.offset-{breakpoint}-{1-12}以及-half与四个-fifth分数版本。间距规则列默认间距 16px行距等于列距单元格默认无内边距。源码、示例与测试验证样式实现source/components/grid/grid.less组件入口纯样式导入source/components/grid/index.js断点变量定义source/include/vars.less编译产物可直接引用lib/metro.css实战示例页examples/grid.html、examples/grid-new.html后者覆盖了 12 等分、三等分、五等分、偏移、no-gap等组合场景自动化测试tests/grid.test.js 通过 examples/grid.html 页面加载与运行时错误检查验证组件可用性总而言之Metro UI CSS 的 Grid 组件以.grid纵向、.row横向、.cell定宽的三层模型配合容器查询驱动的断点体系和变量化的间距控制为响应式布局提供了一套零 JavaScript 依赖、可在任意父容器内自适应的完整方案。需要组件级响应布局时它是最直接的选择。赞分享前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载相关推荐Naive UI 栅格Grid组件完全指南基于 CSS Grid 的响应式布局系统Naive UI 栅格Grid组件完全指南基于 CSS Grid 的响应式布局系统 Naive UI 的 n grid / n grid item 是一套前端UI组件Material UI Grid 组件详解基于 Flexbox 的响应式布局系统Material UI Grid 组件详解基于 Flexbox 的响应式布局系统 本文以 Material UIMUI文档中 Grid 组件的官方指南为主前端UI组件设计系统Material Design Lite Grid 组件完整指南12/8/4 列响应式网格布局Material Design Lite Grid 组件完整指南12/8/4 列响应式网格布局 Material Design LiteMDL的 grid前端UI组件上一篇免费开源AMD Ryzen调试工具SMUDebugTool终极硬件控制指南下一篇YimMenu Lua 事件系统实战event 表与 menu_event 事件注册指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考