@ cssints/ 按摩师
砖瓦布局 点缀数字 : masonry(),一个链式成员 cssints/plugin scope(). 项目
不同的高分被打包成尽可能多的柱子,每个项目在最短的柱子下,没有行间隙. 没错
CSS 第3级网格道(display: grid-lanes) 浏览器有它们的地方, CSS 多列布局
没有。 没有JavaScript,没有媒体查询.
import { cn, p } from "cssints" with { type: "cssints" };
import { masonry } from "@cssints/masonry" with { type: "cssints" };
export const photos = masonry();
export const wall = cn(masonry().columns("12rem").gap(4), p(2));
@layer _.k {
._masonry-lanes {
columns: var(--masonry-min);
gap: var(--masonry-gap);
--masonry-min: 16rem;
--masonry-gap: 1rem;
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(min(var(--masonry-min), 100%), 1fr));
}
/* only when a browserslist target lacks grid lanes */
@supports not (display: grid-lanes) {
._masonry-lanes > * {
display: inline-block;
inline-size: 100%;
vertical-align: top;
break-inside: avoid;
margin-block-end: var(--masonry-gap);
}
}
}
@layer _.a {
._x {
--masonry-min: 12rem;
}
._y {
--masonry-gap: 1rem;
}
}
方法
每次,按任何顺序:
| 方法 | 默认 | 这是什么 |
|---|---|---|
columns | 16雷姆(16雷姆) | 列的最小宽度: 足够多的列, 绝不比容器宽 |
gap | 1雷姆( 1雷姆) | 列之间以及某一项与其列中的下一个项之间的间距(两者均有一个值) |
两者均需要长度(无百分比:倒数 columns 而边际不能用同样的方式。 单数
gap 是一个相距比分(0.25雷姆)的阶梯,如 padding托肯斯去一个长度。 各类型检查
方法,建筑再次检查它。 一种方法在 media() 或者另一个条件 设置它的自定义属性.
浏览器
- 原地:网道.
display: grid-lanescSS 工作组为泥浆学( CSS Grid) 确定的语法 (第3级,2025年)grid-template-rows: masonry财务报告和审定财务报表display: masonry. Safari 26.4号船;Chrome和Edge (自140起)和Firefox(自77起,仍在旧地上)grid-template-*: masonry语法( 语法) 只在国旗后方( 十月) 第2026页.@mdn/browser-compat-data已经知道css.properties.display.grid-lanes。 。 。 . - 倒计时:列. 内核
columns是后退: 有网格道的浏览器忽略它( 网格道) 容器不是块状容器,一个没有它们display: grid-lanes并列出物品 栏。 对于缺乏网格道(默认目标为:Chrome和Firefox)的目标,该建筑添加了@supports not以上关于项目的规则: CSS 的倒置,所以它达到了每个目标并覆盖支持 警告时间:display: grid-lanes(数量)polyfills名称为相同的 BCD 密钥)。 对于所有有网格道的目标(safari 26.4规则不在表格中. - 在Chrome 154 和 Firefox 155 (栏目) 和 Playwright's WebKit 26.6 (网格车道,以及带原生地的列)中检查
隐藏值 :
bun run test:browsers。 。 。 .
规则
- 内尔. 一层内核
_.k,一次,写成样式(css.display("grid-lanes"), (中文(简体) ),gridTemplateColumns, (中文(简体) ),gap, (中文(简体) ),columns:元素自定义属性的默认值(嵌入式泥浆不会继承其 父母的价值观,display,列和间隙。 呼唤是它的阶级_masonry-lanes),以及 每种方法_.a(或_.b),它胜过违约. - 冲突,来源于内核. A 类
cn()持有masonry()财务报告和审定财务报表display, (中文(简体) ),grid, (中文(简体) ),grid-template, (中文(简体) ),grid-template-columns, (中文(简体) ),gap, (中文(简体) ),row-gap, (中文(简体) ),column-gap, (中文(简体) ),columns, (中文(简体) ),column-width或者说column-count是构建错误 打电话时:cssints: masonry: kernel lanes sets display, grid-template-columns, gap, columns (this style also sets display)。 。 。 . 铺垫、大小和颜色并不冲突。 与不透明的运行时字符串相冲突cn()没有看到,如同任何插件一样.
限制
- 顺序不同. 网格道将每件物品放入最短的一栏,于是各行所读物品大致相接. 倒数倒数第1列从上到下填写,然后是下1列:第2项放在第1项下,而不是放在旁边. 当命令重要(一个feed,一个按日期排序的时间表)时,倒置后显示它下行列.
- 倒计时设置了项目"框". 每个孩子是一个与柱子相宽的内在块,底边距为:
gap(一栏断开前的块边距将下一栏在WebKit中向下移动). 短于其行的项目 高度得到那个高度; adisplay在Safari,在26.4之前,它是一个 然后可以启动更低的缺口。 各栏均匀,因此后一项可能留一栏更长. - 不在这里:
flow-tolerance(csints拥有它,flowTolerance()仅Safari 26.4:放在旁边masonry()),行为道(grid-template-rows横跨车道的物品,以及 JavaScript多填充(质子,固态-马松:太重了,不适合CSS给出的倒置.
cd packages/masonry && bun run test # fixtures through the engine (output for both kinds of targets, conflicts, build errors, a build), and the type test via bun run typecheck
bun run test:browsers # Chrome, Firefox and WebKit through playwright-core: items pack with no row gaps
贷项
该布局为CSS网格布局模块三级(W3C CSS工作组), display: grid-lanes 作为WebKit船
这个 无所复制.