How do I make a grid of fixed-size divs that rearrange themselves responsively?

I'm working on a webpage, and I'm trying to have several, fixed-size divs arranged so that there are three in a line per row for wider screens and it shortens to two in a line per row for narrower devices and then one in a line per row (effectively a column) for narrower devices than that.

Here's the CSS code I have so far:

#experience-card {
    position:relative;
    display:inline-block;
    position: relative;
    width: 400px;
    height: 400px;
    z-index:8;
    background-color:#171717;
    border: 1px solid;
    font-family: Inter;
}

#cards {
    display:flex; 
}

And here's the React code I have:

<div id="cards">
   <ExperienceCard />
   <ExperienceCard />
   <ExperienceCard />
</div>

And this is the definition of the experience card:

function ExperienceCard(props) {
    return (
        <div id="experience-card">
            <p></p>
            <li></li>
            <li></li>
            <li></li>
        </div>
    )
}