嵌套网格/ Flexbox标题向下推送内容

Question

我正在尝试在网站上构建一个团队成员列表。并且（总是）这个拥有非常长的职位的人正在推动他的工作描述下载。

这导致了与其他职位描述的错位，设计师对此非常了解。

我到目前为止找到的唯一解决方案是将作业说明限制为3行：

font-size: 10px;
height: 30px;
line-height: 1;

但是，如果作业标题变为4行，则仍然不能防错。此外，较小的屏幕甚至可以包裹短文本以超过4行。

我研究了使用css网格的可能性，但没有找到解决这个问题的方法。需要满足这些条件：

• 图片，名称和标题及说明需要在同一行上对齐
• 四个网格中的每一个都需要具有相同的高度
• 灵活的文字
• 如果我们可以在不使用jQuery的MatchHeight的情况下解决这个问题，那就太棒了。

<div class="row small-up-1 medium-up-2 large-up-3">
  <% loop $Collection %>
    <div class="column person">
      <div class="row column">
        <div class="person__photo">
          <img src="$Image.Url" class="person__photo--round" alt="$Name">
        </div>
      </div>
      <div class="row column text-center">
        <h4 class="person__name">$Name</h4>
        <h5 class="person__role">$Role</h5>
      </div>
      <% if $Blurb %>
        <div class="row column person__summary content">$Blurb</div>
      <% end_if %>
    </div>
  <% end_loop %>
</div>

Answer 1

你能把它们排成行吗？所以做一些像：

＆＃13;

＆＃13;

gallery.innerHTML = copy;

＆＃13;

.headshot, .positionTitle, .description {
	width: 100px;
	min-height: 20px;
	border: solid 1px black;
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

＆＃13;

＆＃13;

＆＃13;