CSS网格背景色未填满整行

Question

我尝试使用网格在纯CSS中创建卡。我将卡分成4行。在最后一行中，我包括了一个按钮，我希望按钮的背景色能填满整个第四行。但是当我输入background-color:#F25F5C时，它并没有填满。如果我试图增加宽度（通过向按钮类添加网格或行内块显示），则整个网格的行为都很奇怪（我已经附上了屏幕截图）。甚至overflow: hidden也无效。我该怎么办？

.cards {
  display: grid;
  grid-template-rows: 3fr 1fr 1fr 1fr;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 200px;
  height: auto;
  border: 1px solid #fff;
  background: #afafaf;
  border-radius: 15px;
}

.cards img {
  width: 100px;
  height: 100px;
  border-radius: 100px;
}

.btn-book {
  background: #F25F5C;
  color: #fff;
}

<div class="cards">

  <img src="Resources/Images/dsc0060.jpg" alt="paris-image" class="image">
  <h4>PARIS</h4>
  <p>$500/4 days</p>
  <a class="btn-book" href="#">Book Now</a>
</div>

我放宽时的屏幕截图：Screenshot

Answer 1

对容器进行两项调整：

1. 添加grid-template-columns: 1fr。

2. 删除align-items: center。