How to align cards in a responsive way in column

Issue

I'm doing some basic cards items in HTML and CSS. On a PC, I want the cards to be aligned in a row, and it works, but on a smaller screen I want them to be aligned in a column, vertically like one under the other. Here is the code.

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("/images/mainpage.jpg");
    background-size: cover;
    overflow: auto;
}

.card {
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 250px 20px;
    grid-template-areas: "image" "text" "stats";
    border-radius: 18px;
    background: #1d1d1d;
    color: white;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
    font-family: roboto;
    text-align: justify;
    cursor: pointer;
    margin: 30px;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}
.rgb::after {
    content: "";
    background: linear-gradient(
            45deg,
            #ff0000 0%,
            #ff9a00 10%,
            #d0de21 20%,
            #4fdc4a 30%,
            #3fdad8 40%,
            #2fc9e2 50%,
            #1c7fee 60%,
            #5f15f2 70%,
            #ba0cf8 80%,
            #fb07d9 90%,
            #ff0000 100%
        )
        repeat 0% 0% / 300% 100%;
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    filter: blur(8px);
    transform: translateZ(-1px); /*or z-index */
    animation: rgb 6s linear infinite;
}
@keyframes rgb {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.js-tilt-glare {
    border-radius: 18px;
}
.card-image {
    grid-area: image;
    background: linear-gradient(#fff0 0%, #fff0 70%, #1d1d1d 100%),
        url("/images/img1.jpg");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
}

.card-text {
    grid-area: text;
    margin: 25px;
    transform: translateZ(30px);
}
.card-text .date {
    color: rgb(255, 7, 110);
    font-size: 13px;
}
.card-text p {
    color: grey;
    font-size: 14px;
    font-weight: 300;
}
.card-text h2 {
    margin-top: 0px;
    font-size: 28px;
}
.card-stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: rgb(255, 7, 110);
}
.card-stats .stat {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
}
.card-stats .border {
    border-left: 1px solid rgb(172, 26, 87);
    border-right: 1px solid rgb(172, 26, 87);
}
.card-stats .value {
    font-size: 22px;
    font-weight: 500;
}
.card-stats .value sup {
    font-size: 12px;
}
.card-stats .type {
    font-size: 11px;
    font-weight: 300;
    text-transform: uppercase;
}

/*card2*/
.card-image.card2 {
    background: linear-gradient(#fff0 0%, #fff0 70%, #1d1d1d 100%),
        url("/images/img2.jpg");
    background-size: cover;
}
.card-text.card2 .date {
    color: rgb(255, 77, 7);
}
.card-stats.card2 .border {
    border-left: 1px solid rgb(185, 67, 20);
    border-right: 1px solid rgb(185, 67, 20);
}
.card-stats.card2 {
    background: rgb(255, 77, 7);
}
/*card3*/
.card-image.card3 {
    background: linear-gradient(#fff0 0%, #fff0 70%, #1d1d1d 100%),
        url("/images/img3.jpg");
    background-size: cover;
}
.card-text.card3 .date {
    color: rgb(0, 189, 63);
}
.card-stats.card3 .border {
    border-left: 1px solid rgb(14, 122, 50);
    border-right: 1px solid rgb(14, 122, 50);
}
.card-stats.card3 {
    background: rgb(0, 189, 63);
}

.price {
    font-size: 20px;
    color: white;
    font-weight: bold;
}

@media screen and (max-width: 600px) {
    .card {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "image"
            "text"
            "stats";
        margin: 15px;
    }
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
        <div class="card">
            <div class="card-image"></div>
            <div class="card-text">
                <span class="date">4 days ago</span>
                <h2>First Idea</h2>
                <p>
                    Lorem ipsum dolor sit demoise amet consectetur, Ducimusele,
                    repudiandae temporibus omnis illum maxime quod deserunt
                    eligendi dolor
                </p>
                <div class="price">€100</div>
            </div>
        </div>
        <div class="card rgb">
            <div class="card-image card2"></div>
            <div class="card-text card2">
                <span class="date">1 week ago</span>
                <h2>Second Idea</h2>
                <p>
                    Adipisicing elit. Ducimus, repudiandae corrupti tialeno des
                    ameto temporibus omnis provident illum maxime quod. Lorem
                    ipsum dolor
                </p>
                <div class="price">€100</div>
            </div>
        </div>
        <div class="card">
            <div class="card-image card3"></div>
            <div class="card-text card3">
                <span class="date">3 week ago</span>
                <h2>N Idea</h2>
                <p>
                    Repudiandae repudiandae de corrupti amet temporibus omnis si
                    provident illum maxime. Ducimus, lorem ipsum dolor
                    adipisicing elit
                </p>
                <div class="price">€100</div>
            </div>
        </div>

    </body>
</html>

You can directly inspect the element on the snippet to see the results. Thanks!

Solution

Use flex-direction or flex-wrap

Firstly, I'd contain your content (ie cards) in a container of some kind rather than them living directly in <body>; it would help in the future. Roughly, something like:

<div class="container">
   <!-- cards go here -->
</div>

... and css, roughly:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

---

To make a vertical stack of content in a flexbox container, you have a couple of options:

1 - flex-direction

Since you're already using a break point, you can add an additional rule which lays-out the content vertically:

@media screen and (max-width: 600px) {

    .container {
        flex-direction: column;
    }

    /* ... */

}

2 - flex-wrap

Flexbox can automatically wrap items if they run out of room. For this, you don't need a break point, which may be appealing especially if you don't care when the wrapping occurs (before-or-after the break point):

.container {
    /* .... */
    flex-wrap: wrap;
}

Answered By - Kalnode