CSS 网格，意想不到的间隙

Question

在构建嵌入式 CSS 网格时，我遇到了意想不到的差距。

布局由卡片组成（每行 3 张卡片），每个卡片子元素（在我的示例中为橙色/灰色/黑色）必须彼此对齐（在同一行中）。行的预期最大高度应基于其单元格的内容。但高度远大于单元格内容：

        .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }
        
        .card {
            display: grid;
            grid-row-gap: 10px;
            grid-auto-rows: 1fr;
        }
        
        .header {
            background-color: orange;
        }
        
        
        .content {
            background-color: grey;
        }
        
        .footer {
            background-color: black;
            color: white;
        }

<div class="cards">
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 10%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 15%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 20%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 25%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 30%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
   </div>

我必须对此布局进行哪些纠正才能避免出现这些意外的间隙？

Answer 1

那是因为你在 CSS 中添加了 10px 的间隙。请参阅

grid-row-gap

和

grid-column-gap

属性。

这应该适合你：

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: grid;
  grid-auto-rows: 1fr;
}

.header {
  background-color: orange;
}

.content {
  background-color: grey;
}

.footer {
  background-color: black;
  color: white;
}

<div class="cards">
  <div class="card">
    <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="content">
      <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 10%" />
    </div>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="card">
    <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
    <div class="content">
      <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 15%" />
    </div>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="card">
    <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="content">
      <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 20%" />
    </div>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="card">
    <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
    <div class="content">
      <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 25%" />
    </div>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="card">
    <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="content">
      <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 30%" />
    </div>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>