Rendering as a list not as a grid

[raghav4]

I have an array of the objects which I'm rendering while using FlipMove component the elements are now being rendered as a list not as a grid.

Here's the code sample :

<div className="card-deck ml-4 mr-4 mt-5 mb-5 row row-cols-1 row-cols-md-3">
          <FlipMove>
            {people.map(person => (
              <div className="col mb-4">
                <PeopleCard
                  personName={person.name}
                  personImageUrl={person.dp}
                  personBio={person.bio}
                />
              </div>
            ))}
          </FlipMove>
</div>

[AlexandraKlein]

With CSS:

 .container-wrapping-filp-move {
    // Targeting div created by react-flip-move
    > div {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(3, 1fr);
    }
  }