背景顏色未填滿 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>