css 网格适合行高

Question

我想去掉行与行之间毫无价值的边距，所以我希望每个 div 都采用内容高度而不给他边留边距 div，我尝试了所有方法但没有任何效果。

.grids {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
  margin: auto;
  grid-gap: 32px;
}

.grid {
  position: relative;
  width: 95%;
  height: max-content;
  margin: 10px;
  padding: 20px;
  background: black;
  border-radius: 10px;
}

<div class="grids">
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
</div>

Answer 1

您可以尝试将grid-gap: 32px设置为grid-gap: 0 32px，它会去除网格行之间的边距；

Answer 2

编辑： 为了制作砌体布局，我在 div 标签中包裹了网格项目所以你可以嵌套任意数量的标签。

由于宽度和高度属性，网格项目溢出内容。
您正在为行和列使用网格间隙。

所以我想这可能会对您有所帮助。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
  grid-gap: 10px;
}

.grid-item {
    padding: 20px;
    background: red;
    border-radius: 10px; 
    margin-bottom: 24px;
}

<div class="grid">
  <div>
    <div class="grid-item">
      <h1>Hello world</h1>
    </div>
    <div class="grid-item">
      <h1>Hello world</h1>
    </div>
  </div>
  <div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
  <div>
    <div class="grid-item">
    <h1>Hello 
      <br> 
      friend
    </h1>
  </div>
  <div class="grid-item"></div>
  </div>
</div>

此外，我重命名了类仅用于命名目的。

MDN 文档 grid-row：row-gap

MDN 文档砌体布局：masonry layout

css 网格适合行高

css grid fit rows heights

css

css-grid