如何使用CSS Grid的grid-template-rows属性实现网格项的等高布局？

翻滚的胖子
2023-07-21 09:55:28
前端技术
CSS JavaScript

简介

CSS Grid是一种强大的网格布局系统，可以帮助我们实现复杂的布局效果。其中，grid-template-rows属性可以用来定义网格容器中每一行的高度。

用法

grid-template-rows属性可以接受多个值，用空格分隔。每个值表示一行的高度。可以使用长度单位（如px、em）或百分比（如30%、50%）来定义行高。例如：

grid-template-rows: 100px 200px 150px;

这个例子中，网格容器会被分为三行，分别高度为100px、200px和150px。

如果需要让所有行等高，可以使用重复关键字的语法。例如：

grid-template-rows: repeat(3, 1fr);

这个例子中，网格容器会被分为三行，并且每一行的高度都相等，占据剩余可用空间的1/3。

案例演示

下面是一个简单的案例，演示如何使用grid-template-rows属性实现网格项的等高布局：

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

.grid-item {
  background-color: #f2f2f2;
  padding: 20px;
}
</style>

<div class="grid-container">
  <div class="grid-item">Grid Item 1</div>
  <div class="grid-item">Grid Item 2</div>
  <div class="grid-item">Grid Item 3</div>
  <div class="grid-item">Grid Item 4</div>
  <div class="grid-item">Grid Item 5</div>
  <div class="grid-item">Grid Item 6</div>
  <div class="grid-item">Grid Item 7</div>
  <div class="grid-item">Grid Item 8</div>
  <div class="grid-item">Grid Item 9</div>
</div>

上述代码中，我们创建了一个包含9个网格项的网格容器，并使用grid-template-rows属性将每一行的高度都设置为1fr，使得网格项在垂直方向上等高布局。

通过运行上述代码，我们可以看到网格项的等高布局效果。