Send boxes to next line after three boxex in CSS

Issue

I am trying to make a box which will have photos of people but i want that once three boxes are added in one line then other boxes should go in next line and not adjust in the same line because the data will be dyanmic so i dont know how many boxes will be there , this what it looks like right now :- now if i add the same div one more time this happens :-

here is my code from react jsx:-

<div className={Profilecss.lowerpart_left_content} id={Profilecss.lowerpart_left_friends}>
            <div className={Profilecss.infobox} id={Profilecss.friends_upperpart}>
                <div id={Profilecss.friends_1}>
                  Friends
                </div>
                <div className={Profilecss.seemore} id={Profilecss.friends_2}>
                  See more
                </div>
              </div>
              <div className={Profilecss.infobox_lowerpart} id={Profilecss.friends_lowerpart}>
                <div className={Profilecss.friends}>
                  <div id={Profilecss.friend_photo}>s</div>
                  <div id={Profilecss.friend_name}>d</div>
                </div>
                <div className={Profilecss.friends}>
                  <div id={Profilecss.friend_photo}>s</div>
                  <div id={Profilecss.friend_name}>d</div>
                </div>
                <div className={Profilecss.friends}>
                  <div id={Profilecss.friend_photo}>s</div>
                  <div id={Profilecss.friend_name}>d</div>
                </div>
                <div className={Profilecss.friends}>
                  <div id={Profilecss.friend_photo}>s</div>
                  <div id={Profilecss.friend_name}>d</div>
                </div>
              </div>
            </div>

this is not the whole code so maybe it can cause some problem

This is the CSS:-

#lowerpart_box{
    width: 55%;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2%;
    color: white;
}

.lowerpart_left_content{
    background-color: #242526;
    border-radius: 8px;
    min-height: 10%;
    max-height: 45%;
    margin-top: 5%;
}

#lowerpart_left_photos{
    display: grid;
    grid-template-rows: 1fr 3fr;
}

.infobox{
    display: flex;
    height: fit-content;
    width: 95%;
    gap: 50%;
    font-size: 1.2rem;
    padding: 1%;
    margin-left: 3%;
}

.seemore{
    color: blue;
}

#photo{
    border: 2px solid black;
    width: 35%;
    height: 100%;
}

.infobox_lowerpart{
    display: flex;
}

.friends{
    border: 2px solid black;
    display: grid;
    grid-template-rows: 3.5fr 1fr;
    width: 35%;
    max-height: 40vh;
    margin: 2%;
}

Solution

You are using display: flex on your infobox_lowerpart class. If you do not specify it, the flex will put all the components in the same row. You can use flex-wrap: wrap to avoid this.

You will also need to adjust your components' width.

Here's a working sandbox based on your code

Answered By - crls_b