当标题换行时，图像和标题的 CSS 网格会错位，当列数由于媒体查询而发生变化时，情况会变得更加复杂

Question

我们的网站上有一个营销页面，显示方形产品图像网格，每个图像上方都有一个标题。我们希望它在宽屏幕上为 3 列宽，在窄屏幕（移动设备）上为 2 列宽。目前使用 css

grid

和媒体查询来更改窄屏幕上的列数。如果我们将标题和图像放在每个网格单元内，那么包裹的长标题会占用更多的垂直空间，从而将该单元格中的图像相对于该行上的邻居推低。

如何使图像相对于彼此对齐，而不管该行中标题的高度如何？

有 6 张图像，因此它们非常适合 3 或 2 列，因此填充最后一行没有问题。

演示虚拟布局的 codepen。

.container {
  width: 60%;
  border: 1px solid black;
  margin: 0 auto;
  padding: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Make the grid 2 columns on narrow screens */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-item .heading {
  font-size: 1em;
}
.grid-item a {
  display: block;
  aspect-ratio: 1/1;
}
.grid-item .fake-img {
  width: 100%;
  height: 100%;
  background-color: palegoldenrod;
}

<p>The grid contains items, each has a heading and an image (faked here with a coloured box).  Because the headings have variable length, some wrap and push the image down relative to the top of the item.  This makes images along one row become misaligned.  This would be easy to fix in a fixed layout by putting the headings in their own cell of the grid, but one would have to arrange the 3 headings in one row, then 3 images in the second row, and repeat.  If a media query for narrow screens tells the grid to have 2 columns instead of 3, the whole layout would break because it has 3 headings and images hardcoded into each row.
</p>
<p>There is a media query that makes the grid 2 columns wide on a page less than 900px wide, you can resize your browser window to achieve this.  I'm not sure how this will look in the Facebook Snippet viewer.</p>

<div class="container">
  <div class="grid">
    <div class="grid-item">
      <span class="heading">Heading</span>
      <a href="#"><div class="fake-img"></div></a>
    </div>
    <div class="grid-item">
      <span class="heading">Heading Heading Heading</span>
      <a href="#"><div class="fake-img"></div></a>
    </div>
    <div class="grid-item">
      <span class="heading">Heading</span>
      <a href="#"><div class="fake-img"></div></a>
    </div>
    <div class="grid-item">
      <span class="heading">Heading Heading Heading Heading Heading</span>
      <a href="#"><div class="fake-img"></div></a>
    </div>
    <div class="grid-item">
      <span class="heading">Heading</span>
      <a href="#"><div class="fake-img"></div></a>
    </div>
    <div class="grid-item">
      <span class="heading">Heading</span>
      <a href="#"><div class="fake-img"></div></a>
    </div>
  </div>
</div>

一种方法可能是先有一行标题，然后是一行与这些标题匹配的产品图像，但这以一种非常硬编码的方式将标题与其图像分开。当媒体查询将列数更改为 2 时，您也会遇到麻烦，然后一行上的 3 个标题就会中断。我知道使用 Flexbox，您可以使用 CSS 重新排列项目的顺序，因此媒体查询可以更改列数并重新排列元素，但整个方法看起来丑陋且维护成本高。

我可以用类似

.heading { display: inline-block; height: 2em;

之类的东西强制标题的高度，但这对于包裹比这更高并且非常脆弱的标题不起作用。

我已经四处寻找，但这个问题似乎相当小众，而且我还没有看到尝试的解决方案。有人有什么好主意我可以尝试吗？

Answer 1

答案在于设计

.grid-item

类本身的样式。请注意，由于这些网格项位于普通 CSS 网格中，因此给定行中的每个单元格具有相同的高度。这意味着，如果您将每个网格项变成一个弹性框，将方块推到底部自然会使它们彼此对齐。它看起来像这样：

.grid-item {
  display: flex;
  flex-direction : column;
  justify-content: flex-end; // or space-between. Whichever you prefer
}

flex-end

或

space-between

都可以实现它（尽管一个看起来比另一个更好，具体取决于你想要什么风格）。