Trying to align the "Check it out" links to the bottom of each card by default

Haven't touched CSS in a few months so I'm super rusty, but decided to work on my portfolio a little bit more.. I'm wanting to have the 3 links sit at the bottom of the card, and really, any future links to sit there too. They all have the class of "project-link" and the below CSS is what has been input so far for the projects section
.projects {
background-color: #E4E8FF;
background-size: cover;
padding: 3rem 0;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

.projects h2 {
text-align: center;
margin-bottom: 3rem;
}

.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 2rem;
}

.project-card {
background-color: transparent;
box-shadow: 4px 4px 4px 5px rgba(0,0,0,0.2);
text-align: center;
padding: 2rem;
border-radius: 10px;
}

.project-card img {
max-width: 100%;
margin-bottom: 1.5rem;
}
.projects {
background-color: #E4E8FF;
background-size: cover;
padding: 3rem 0;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

.projects h2 {
text-align: center;
margin-bottom: 3rem;
}

.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 2rem;
}

.project-card {
background-color: transparent;
box-shadow: 4px 4px 4px 5px rgba(0,0,0,0.2);
text-align: center;
padding: 2rem;
border-radius: 10px;
}

.project-card img {
max-width: 100%;
margin-bottom: 1.5rem;
}
3 Replies
CDL
CDL•2y ago
whilst I'm at it, when you shrink this to mobile view, the cards go edge to edge, I'd still like a slight gap on either side of the cards, but not really sure how I implement that?
vince
vince•2y ago
I'm not sure which class is your product information container, but you could make that a flex and have justify-content: space-between and it would have even space between all items in your container, thus putting your links at the bottom. You could also make it position: absolute. Probably a better way than what I mentioned though Oh I see, you're using grid for your project info container. Try giving that a height of 100 and see if it expands to take up all the available card space Though honestly I quite like the differing heights, I think it would look good if you made the cards heights different as well. Looks good so far tho!
CDL
CDL•2y ago
Thanks for the tips Vince 🙂 i'll have a tweak with it and see what I come up with
Want results from more Discord servers?
Add your server