CSS 等分网格生成

1. 设置布局

2. 预览与尺寸核对

在 632px 容器中：3 列 × 200.0000px + 2 个列间距 × 16px。此处列宽为不含边框与内边距的数学结果。

预览固定为设定宽度，窄屏在框内横向滚动。导出代码的 width:100% 会随父容器收窄，max-width 只限制上限，列数不会自动变少。

CSS

.jijie-grid {
  display: grid;
  width: 100%;
  max-width: 632px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(64px, auto);
  column-gap: 16px;
  row-gap: 12px;
}
.jijie-grid > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

HTML 示例

<div class="jijie-grid">
  <div>卡片 1</div>
  <div>卡片 2</div>
  <div>卡片 3</div>
  <div>卡片 4</div>
  <div>卡片 5</div>
  <div>卡片 6</div>
</div>

范围与隐私

列数与示例行数1–6，行列间距0–64px，最大宽度240–1600px，仅整数；列间距合计须小于容器宽度。示例行数决定卡片数量，不生成固定行数约束，真实行高由内容与64px最小值决定。

仅生成等分列，不含跨行跨列、拖放布局、断点、自动填充或瀑布流。minmax(0,1fr)允许列收缩；实际内容仍需检查长文本、图片与可访问性。不保证适用于所有页面。参数在当前浏览器内存计算，不上传、不调用外部API、不自动保存，刷新清除。