解决使用 CSS Grid 布局时出现底部空白问题的方法

问题描述

在使用 CSS Grid 布局时，经常会出现底部空白的问题。这个问题的原因是，CSS Grid 布局会自动为每一行添加一个空白的网格行，如果最后一行没有填满，那么就会出现底部空白的情况。

例如，下面这个简单的 CSS Grid 布局示例，就会出现底部空白的问题：

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}
</style>

解决方法

方法一：使用 grid-auto-rows 属性

使用 grid-auto-rows 属性可以设置自动添加的网格行高度，从而解决底部空白的问题。我们可以将 grid-auto-rows 属性设置为 minmax(0, auto)，这样就可以让自动添加的网格行高度根据内容自适应。

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(0, auto);
}
.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}
</style>

方法二：使用 grid-auto-flow 属性

使用 grid-auto-flow 属性可以改变自动填充网格的方向。默认情况下，grid-auto-flow 属性值为 row，即自动填充行。我们可以将 grid-auto-flow 属性值设置为 dense，这样就可以让自动填充的网格尽量填满空白区域，从而避免底部空白的问题。

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-flow: dense;
}
.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}
</style>

总结

底部空白是 CSS Grid 布局常见的问题之一，但是通过使用 grid-auto-rows 属性和 grid-auto-flow 属性，我们可以轻松解决这个问题。同时，我们也可以根据实际情况选择不同的解决方法，从而达到最佳的效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658e9de0eb4cecbf2d47b3c0