These products are members of a CSS grid:

<ul
  className={css({
    display: 'grid',
    gap: '8px',
    gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
  })}
>
  ...
</ul>

Now let’s say that every member has markup similar to:

<li>
  <h1>Product Title</h1>
  <p>Product Description</p>
</li>

How do I make it so that <h1> height is the same across all grid members that are on the same row?

i.e. In case of the example picture I shared, I would want that the middle product would use the same amount of vertical space for title as the other two