时间戳

首页 > 解决方案 > div 如何在网格布局中保持其最小高度？

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

问题描述

我有网格布局，网格模板列设置为（自动自动）。然后，在每个网格中我有一个 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。我怎样才能改变它？我尝试了不同的显示：块/内联/内联块，没有任何效果。

提前致谢！

标签： htmlcsscss-grid

解决方案

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

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

推荐阅读