div 如何在网格布局中保持其最小高度？答案

【问题标题】：How can div keep its minimum height inside grid layout?div 如何在网格布局中保持其最小高度？
【发布时间】：2021-01-17 06:44:02
【问题描述】：

我有网格布局，网格模板列设置为（自动自动）。然后，在每个网格中我有一个 div，在 div 里面有一些文本。所有 div 具有相同的高度，但我希望每个 div 的高度尽可能小。示例如下：

body {
  margin: 0;
  background-color: #42cbf5;
}
* {
  box-sizing: border-box;
}
p {
  margin: 0;
}

.wrapper {
  position: relative;
  background-color: #E0E0E0;
  min-height: 300px;
}

.articles {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-auto-rows: 1fr;
}

.article {
  display: inline;
  background-color: white;
  margin: 50px;
  display: block;
  min-height: 5%;
  position: relative;
  padding: 5px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="wrapper">
      <div class="articles">

        <div class="article">
          <p>TEST</p>
        </div>

        <div class="article">
          <p>TEST</p>
        </div>

        <div class="article">
          <p>TEST</p>
          <p>TEST</p>
          <p>TEST</p>
        </div>

      </div>
    </div>
  </body>
</html>

每个白色 div 的高度相同，取决于每行中最高的 div。我怎样才能改变它？我尝试了不同的显示：块/内联/内联块，没有任何效果。

提前致谢！

【问题讨论】：

标签： html css css-grid

【解决方案1】：

margin: auto; 在您的文章类上将保持 div 的大小最小。你可能需要用一些填充来补偿，这取决于你到底想要什么

.article {
          display: inline;
          background-color: white;
          margin: auto;
          display: block;
          min-height: 5%;
          position: relative;
          padding: 5px;
        }

【讨论】：

就是这样，简单，谢谢！我会尽快接受这个作为答案。此外，边距：50px 50px 自动 50px；按照我的意愿工作。