Portfolio Project: Styling the project links to align and be the same size

Hello everyone!

After searching around both on this forum and elsewhere, I decided to bring up this problem that’s been bugging me for a while now.

In the project-grid of my portfolio website, I have added these three projects:

And here is the code that correlates with that picture:

.projects-section {
  align-items: center;
  text-align: center;
  padding: 100px 0px;
  background: $header_color_primary;
  color: $header__color_secondary;

  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    overflow: hidden;
    grid-gap: 4rem;
    width: 90%;
    margin: 1rem auto;

    .project {
      background: $header__color_secondary;
      color: #43464B;

    .project-tile {
      width: 80%;
      border-radius: 7px;
      margin: auto;
      text-decoration: none;

      .project-image {
        height: calc(100%);
        width: 100%;
        object-fit: cover;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;

      .project-name {
        color: #43464B;
        padding: 2rem 0.5rem;

As you can see, these three squares (the project links) are of different sizes and they don’t line up. I got these pictures through screenshots (so that may explain why they’re of different size) but I can’t figure out why they won’t line up horizontally. So my two questions are:

(1) Rather than screenshots, is there an easier (and possibly better) way of gathering pictures to represent a project that I want to add to my portfolio?

(2) How can I ensure that the project links are the same width and height on the web page?

Thank you in advance!


1 Like

Have you tried using the height property? It should work on the project tile class. Also padding will effect the height and width.

Thank you so much! I modified the project-tile class to include a height property and refactored project-image and project-name to align properly and now it looks great!

1 Like