PAYATHON 2026

CSS 能否在保持网格项为正方形的同时，让内部元素跨卡片自动对齐？

数据小陈

可以用 subgrid 对齐同一排卡片的对应区域。要让内容完整放进正方形卡片，对齐后各区域所需的总高度不能超过卡片的可用高度。

内容长度不受限制时，无法同时保证内容完整显示、对应区域按最高内容自动增长，且卡片始终保持正方形。仅给每张卡片加上 subgrid，也无法让整个网格按对应区域的最大高度统一对齐。

正方形尺寸与内容高度之间存在约束

假设卡片宽度为 S，正方形要求它的高度也是 S。卡片内部包含标题、说明和操作区，参与对齐的各区域最大高度分别为 H₁、H₂、H₃，那么至少需要满足：

H₁ + H₂ + H₃ + 间距 + 内边距 + 边框 ≤ S

这些最大高度可能来自不同卡片：一张卡片的标题最高，另一张卡片的说明最高。即使每张卡片原本都能容纳自己的内容，共享区域高度后也可能装不下。

总高度超出可用空间时，可以允许内容溢出、滚动或截断，也可以让卡片增高或增宽。JavaScript 可以计算尺寸，但同样无法消除空间限制。

按排对齐：让卡片共享父网格的内容行

subgrid 共享父网格的轨道。要对齐一排卡片的三个内容区域，父网格需要提供三条行轨道。每张卡片跨越这三行，并通过 grid-template-rows: subgrid 使用它们。

下面的示例每排包含三张卡片，边长根据容器宽度计算。内部三行均为 auto，标题、说明和操作区没有固定高度。

<div class="gallery">
  <div class="card-row">
    <article class="card">
      <h3>较短的标题</h3>
      <p>简短说明。</p>
      <div><button type="button">查看</button></div>
    </article>

    <article class="card">
      <h3>可能换成多行的较长标题</h3>
      <p>这段说明更长，用于展示不同卡片之间共享内容行的效果。</p>
      <div><button type="button">查看</button></div>
    </article>

    <article class="card">
      <h3>另一张卡片</h3>
      <p>另一段说明。</p>
      <div><button type="button">查看</button></div>
    </article>
  </div>
</div>
.gallery {
  container-type: inline-size;
}

.card-row {
  --gap: 1rem;
  --side: calc((100cqi - var(--gap) - var(--gap)) / 3);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: var(--gap);
  margin-block-end: var(--gap);
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 3;

  box-sizing: border-box;
  block-size: var(--side);
  min-inline-size: 0;
  min-block-size: 0;
  align-self: start;

  background: #f3f4f6;
}

.card > * {
  margin: 0;
  padding: 0.5rem;
  overflow-wrap: anywhere;
}

这里的 100cqi 对应 .gallery 的内容区宽度。减去两个列间距后除以三，就得到每张卡片的宽度和高度。这个正方形尺寸随容器变化，内部行高仍然不固定。

对齐后的内容能放进卡片时，三张卡片的标题、说明和操作区会分别共享行边界。auto 轨道还可能分配剩余空间，因此区域高度不一定恰好等于内容所需的最小高度。

这个示例需要浏览器支持 subgrid 和容器查询长度单位。它采用明确的三列和每排包装结构；如果改成两列或一列，需要同步调整列数、间距计算和每排的内容组织。

内容过高时，必须定义处理方式

示例给卡片指定了高度，内容过高时可能溢出，无法保证任意长度的内容都完整放进正方形。

如果业务允许裁切，可以在卡片上设置：

.card {
  overflow: hidden;
}

如果要求内容始终可访问，可以结合布局设计选择滚动区域，或放宽正方形限制。overflow: hidden 会隐藏超出的内容，不能解决空间不足的问题。

原问题中的 aspect-ratio: 1 规定的是首选宽高比。最终尺寸仍受自动最小尺寸、内容贡献和网格拉伸等规则影响，单独设置它不能保证所有网格布局中的卡片都保持正方形。

整个网格统一对齐有什么不同？

按排排列的卡片通常占用不同的父网格行。例如：

第一排卡片：标题轨道 A、说明轨道 B、操作轨道 C
第二排卡片：标题轨道 D、说明轨道 E、操作轨道 F

subgrid 可以让第一排卡片共享 A、B、C，第二排共享 D、E、F，但不会自动计算并关联以下关系：

A 与 D 使用相同的内容最大高度
B 与 E 使用相同的内容最大高度
C 与 F 使用相同的内容最大高度

因此，在常见的多排卡片结构中，单靠 subgrid 无法自动同步整个网格中各类内容区域的高度。可以针对特定结构重新设计共享轨道，但通常会增加元素定位和响应式换行的复杂度。

如果卡片数量、列数和内容都需要动态变化，且必须全局同步，通常需要用 JavaScript 测量对应区域的自然高度，将最大值应用到各卡片。容器宽度、字体、图片或内容变化后也需要重新测量；宽度变化会影响文本换行，进而改变所需高度。

对于这个需求，按排使用 subgrid 较为直接。如果必须让整个网格统一对齐，先确定内容超出正方形时如何处理，再选择布局结构或测量方案。

备注：内容仅供参考。