背景颜色未填充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>

放置宽度时的屏幕截图：

Answer 1

对网格容器进行两项调整：

1. 删除justify-content: center。

2. 删除align-items: center。

然后在网格项目级别管理内容的居中。详细信息如下：

• Centering in CSS Grid
• The difference between justify-self, justify-items and justify-content in CSS Grid
• What is the difference between align-items vs. align-content in Grid Layout?

Answer 2

使用

display: block; margin-left: auto; margin-right: auto; img标签。

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

.cards .image {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto; 
}

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

<div class="cards">

  <img src="http://placekitten.com/301/301" alt="paris-image" class="image">
  <h4>PARIS</h4>
  <p>$500/4 days</p>
  <a class="btn-book" href="#">Book Now</a>
</div>