CSS Grid 中如何设置网格自适应纵向长度

CSS Grid 是一种新型的网格布局，在前端开发中起到了非常重要的作用。这种布局方式可以让我们更加方便地进行布局，以及实现各种复杂的效果。然而，在使用 CSS Grid 进行布局时，我们可能会遇到一些问题，比如如何正确设置网格的纵向长度。

如何设置网格自适应纵向长度？

在网格布局中，有两个关键的属性可以帮助我们设置网格的大小，分别是 grid-template-rows 和 grid-auto-rows。这两个属性的区别在于 grid-template-rows 是用来定义网格容器的行高的，而 grid-auto-rows 是用来定义网格项的行高的。

如果我们想要设置网格的纵向长度自适应，建议使用 grid-auto-rows 属性，这可以让网格项根据内容的高度自适应。具体的，我们可以使用以下代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

在上面的代码中，grid-auto-rows 属性中的 minmax(100px, auto) 表示网格项的行高最小为 100px，最大为自适应。

怎样使用 CSS Grid？

下面是一个简单的 CSS Grid 布局示例，其中我们设置了三栏布局，每栏都是 1fr 宽度，高度自适应。你可以将以下代码复制到你的 HTML 文件中以了解更多。

// javascriptcn.com 代码示例
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 10px;
  }

  .grid-item {
    background-color: #e8e8e8;
    border: 1px solid #ddd;
    padding: 20px;
    font-size: 20px;
  }
</style>

总结

在 CSS Grid 中，设置网格的自适应纵向长度可以让我们更加方便地进行布局，以及实现各种复杂的效果。我们可以使用 grid-auto-rows 属性来实现这一点，同时在实际应用中需要注意，不要让网格项高度过高或过低，以避免造成布局失衡的问题。

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