背景颜色未填满 CSS 网格中的行

Question

我尝试使用网格在纯 CSS 中创建一张卡片。 我把卡片分成 4 行。 在最后一行，我包含了一个按钮，我希望按钮背景颜色填满整个第 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 。

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

• 在 CSS 网格中居中
• CSS Grid 中justify-self 、 justify-items和justify-content的区别
• Grid Layout 中的 align-items 与 align-content 有什么区别？

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>