# @cssints/masonry 中文文档

规范地址：https://npmcn.com/package/%40cssints/masonry/

版本：0\.35\.1
npm 元数据更新时间：2026-11-07T14:55:40.754Z
中文译文更新时间：2026-11-11T03:39:57.375Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cssints/masonry
原文对照：https://npmcn.com/package/%40cssints/masonry/?lang=original
项目主页：https://cssints.dev/
源码仓库：https://github.com/alexeiaccio/css-in-ts-compiler

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：9.8 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- peer 依赖：cssints ^0\.35\.0
- 首次发布：2026-10-10T20:57:53.502Z
- 最新版本发布：2026-11-07T14:55:40.449Z
- 近 30 天下载量：7418（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：43（近 12 个月 43 个）

## 中文简介

Cssints 的介面: 显示带 CSS 列倒转的网格线条, 作为链条成员

## 安装

```sh
npm install @cssints/masonry
```

也可以使用：`pnpm add @cssints/masonry`、`yarn add @cssints/masonry`、`bun add @cssints/masonry`

## README

# @ cssints/ 按摩师

砖瓦布局 [点缀](https://npmcn.com/package/README.md)数字 : `masonry()`,一个链式成员 `cssints/plugin` `scope()`. 项目 不同的高分被打包成尽可能多的柱子,每个项目在最短的柱子下,没有行间隙. 没错 CSS 第3级网格道(`display: grid-lanes`) 浏览器有它们的地方, CSS 多列布局 没有。 没有JavaScript,没有媒体查询.

```ts
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));
```

```css
@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-lanes` cSS 工作组为泥浆学( 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中向下移动). 短于其行的项目 高度得到那个高度; a `display` 在Safari,在26.4之前,它是一个 然后可以启动更低的缺口。 各栏均匀,因此后一项可能留一栏更长.
-   不在这里: `flow-tolerance` (csints拥有它, `flowTolerance()`仅Safari 26.4:放在旁边 `masonry()`),行为道(`grid-template-rows`横跨车道的物品,以及 JavaScript多填充(质子,固态-马松:太重了,不适合CSS给出的倒置.

```bash
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船 这个 无所复制.

## 常见问题

### @cssints/masonry 是什么？

Cssints 的介面: 显示带 CSS 列倒转的网格线条, 作为链条成员

### 如何安装 @cssints/masonry？

在项目目录运行 npm install @cssints/masonry，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：cssints（^0\.35\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cssints/masonry 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cssints/masonry 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cssints/masonry 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cssints/masonry 可以商用吗？

@cssints/masonry 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cssints/masonry 的下载量有多少？

根据 npm 官方下载统计，@cssints/masonry 在 2026/10/11 – 2026/11/09 这 30 天内被下载 7,418 次，日均约 247 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cssints/masonry 还在维护吗？

最新版本 0\.35\.1 发布于 2026/11/07（3 天前）；至今共发布 43 个版本，其中过去 12 个月发布了 43 个；首次发布于 2026/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。