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:
Make two adjustments to your grid container:
Remove justify-content: center
.
Remove align-items: center
.
Then manage the centering of content at the grid item level. Here are the details:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.