如何将网格单元的高度设置为等于兄弟的具体高度？

Answer 1

我会首先简化你的 HTML 结构，然后更新 CSS，如下所示。

body {
  background-color: tan;
  color: black;
  margin 0;
}

.grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 20px;
  background-color: antiquewhite;
  width: fit-content;
}

.cell {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

img.icon {
  height: 0;
  min-height: 100%;
}

.cell > p.note {
  width: min-content;
}

<div class=grid>
  <div class="cell">
    <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg">
    <p class="note">Matthew Patel</p>
  </div>
  <div class="cell">
    <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg">
    <p class="note">Lucas Lee</p>
  </div>
  <div class="cell">
    <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg">
    <p class="note">Todd Ingram</p>
  </div>
  <div class="cell">
    <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg">
    <p class="note">Roxie Richter</p>
  </div>
</div>