How can i do so that in my div just fits for three child divs?-CodePudding

Im doing a Posts component with react js where i have many Post components inside it.

Posts.js

const Posts = () => {
  return (
    <div className="postsContainer">
        <Post/>
        <Post/>
        <Post/>
        
    </div>
  )
}

export default Posts;

Posts.css:

.postsContainer{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    padding:100px;
}

Post.js:

const Post = () => {
  return (
    <div>
        <div className="postContainer">
            <div className="userData">
                <img/>
                <p>Mateo Ghidini</p>
            </div>
            <div className="userPost">
                <img/>
            </div>
            <div className="actions">
                
            </div>
        </div>
    </div>
  )
}

export default Post

Post.css:

.postContainer{
    height:300px;
    width:300px;
    border:2px solid black;
    border-radius: 10px;
    margin:20px;
}

.userData{
    border-bottom:2px solid black;
}

.userPost{
    height:180px;
}

.actions{
    border-top:2px solid black;
    height:30px;
}

What is the css property so that if i enter more than three post components inside my posts components, the 4th 5th and 6th post are positioned in a row below and not continue positioning them one beside another.

So basically i want to render my post components in row of threes.

CodePudding user response：

You can try rendering it as css grid element

Add those to .postContainer

  display: grid;
  grid-template-columns: repeat(3, 1fr);

You can read more about css grid here: https://css-tricks.com/snippets/css/complete-guide-grid/

CodePudding user response：

The property that you're most likely looking for is flex-wrap with the value set as wrap. It will ensure that in the case of overflowing the contents will be moved to the next row according to the value of the flex-direction property.