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

Question

I tried to create a card in pure CSS using the grid. I divided the card into 4 rows. In the last row, I included a button, and I wanted the button background color to fill up the entire 4th row. But it doesn't fill up when I put background-color:#F25F5C . If I tried to increase the width (by adding grid or inline-block display to the button class), the entire grid acts weird (I've attached the screenshot of that). And even overflow: hidden doesn't work. What should I do?

 .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 of when I put width:

Answer 1

Make two adjustments to your grid container:

1. Remove justify-content: center .

2. Remove align-items: center .

Then manage the centering of content at the grid item level. Here are the details:

• 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

use

display: block; margin-left: auto; margin-right: auto; for you the img tag.

 .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>