Is there a better way to Stack cards in Grid layout

I am trying to stack my projects in this format.

But what I am getting is this:

I am using those blue arrows to indicate how I want the stack to be like, as seen in the first picture.

.project {
    position: relative;
    border: 1px solid var(--gray);
}

.project__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project__image {
    border-bottom: 1px solid var(--gray);
    aspect-ratio: 16/9;
    opacity: .8;
}

.project__content {
    padding: 16px;
}

.project__name {
    font-size: 24px;
    font-weight: 500;
}

.project__description {
    color: var(--gray);
    margin: 16px 0;
}

.project__techs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--gray);
    padding: 8px;
    border-bottom: 1px solid var(--gray);
    font-family: monospace !important;
}
.project__tech::after{
    content: ",";
}

.project-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 48px;
}

@media (max-width: 1024px) {
    .project-list {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

The card is well arranged as you can see, But I want it stacked after each other, NOT having the same height. Because some of the cards can be longer than each other.

You need to sign in to view this answers

Related Post