CSS 子网格跨多行对齐元素

Question

我正在尝试创建一个卡片网格，其中元素（标题、内容、按钮）在所有卡片上完美对齐，甚至在不同的行上也是如此。虽然 CSS 子网格在单行内工作，但我无法让元素跨多行对齐。

一个例子：

1. 3x3 的卡片网格

2. 每张卡片有 3 个元素：标题、内容和按钮

3. 所有内容部分应根据最大内容对齐和扩展

.Grid_Container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.Grid_Item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

<div className="Grid_Container">
  <div className="Grid_Item">
      <h2>Title</h2>
      <p>Content</p>
      <button>Button</button>
    </div>
  {/* Repeated for 9 cards */}
</div>

正如您在图像中看到的，使用 CSS 子网格的项目对齐每行工作正常。但是，我想根据所有行的含义来对齐它：

如果任何卡有：

1. 高标题：所有卡片中的所有标题都应扩展到最高标题

2. 高内容：所有内容部分都应扩展到最高部分

3. 高按钮：所有按钮部分都应扩展到最高的按钮。

这样我就可以创建布局完全相同的卡片。

Answer 1

你可以用 CSS 来获得外观，但我认为你最终会需要一些 JS 来确保容器的实际大小最终是正确的。

这是一个简单的例子。首先，将每张卡片放在同一行，以获得您想要的外观。正如您所发现的，这可以为每个内部元素获得正确的高度。

然后将卡片翻译到您想要看到它们的位置。

<style>
  .Grid_Container {
    display: grid;
    width: 300vw;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
    position: relative;
  }
  
  .Grid_Container>div:nth-child(4),
  .Grid_Container>div:nth-child(5),
  .Grid_Container>div:nth-child(6) {
    transform: translate(calc(-300% - 30px), 100%);
    position: relative;
  }
  
  .Grid_Container>div:nth-child(7),
  .Grid_Container>div:nth-child(8),
  .Grid_Container>div:nth-child(9) {
    transform: translate(calc(-600% - 60px), 200%);
    position: relative;
  }
  
  .Grid_Item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
</style>
<div class="Grid_Container">
  <div class="Grid_Item">
    <h2>Title<br>with 2 lines</h2>
    <p>Content</p>
    <button>Button</button>
  </div>
  <div class="Grid_Item">
    <h2>Title</h2>
    <p>Content<br>with 3 lines<br>last line</p>
    <button>Button</button>
  </div>
  <div class="Grid_Item">
    <h2>Title</h2>
    <p>Content</p>
    <button>Button<br>with 2 lines</button>
  </div>
  <div class="Grid_Item">
    <h2>Title</h2>
    <p>Content</p>
    <button>Button</button>
  </div>
  <div class="Grid_Item">
    <h2>Title</h2>
    <p>Content</p>
    <button>Button</button>
  </div>
  <div class="Grid_Item">
    <h2>Title</h2>
    <p>Content</p>
    <button>Button</button>
  </div>
  <div class="Grid_Item">
    <h2>Title</h2>
    <p>Content</p>
    <button>Button</button>
  </div>
  <div class="Grid_Item">
    <h2>Title</h2>
    <p>Content</p>
    <button>Button</button>
  </div>
  <div class="Grid_Item">
    <h2>Title</h2>
    <p>Content</p>
    <button>Button</button>
  </div>
</div>