How to "break" div into two columns?

In% parent, you would need to define two properties that define how elements should act when they need to do this line break.

The first one would be div . It tells you which direction the element will "grow."

The second would be flex-direction: row | row-reverse | column | column-reverse; . It tells you how to break element lines.

To facilitate, there is the shortened version of these two properties, which is the flex-wrap: nowrap | wrap | wrap-reverse; , which you pass as the first argument to the direction and second the line break.

I made a very quick code that I think will help you. You can see working in CodePen .

A very cool link to reference is CSS-Tricks , it contains a detailed explanation of flexbox properties.

Here is a template that will break the line every 3 items. All responsive using flex-box . I left item-7 to see that it will break as the list grows. OBS : I made a comment in the CSS on how to adjust the margins between one box and another if you want to change the distance.

Explanation: The property that causes the item line to break is flex-wrap:wrap , and it breaks by 3 in 3 because each bos has 1/3 width, therefore 3 .box add up to 100% and item 4 ends up being "played" to the bottom line. Official flex-box documentation: link

If you want box item-7 to be aligned in the middle, just put justify-content:cente r in .wrapper

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: red;
}
.box {
    box-sizing: border-box;
    padding: 1rem;
    margin: 1rem;
    background-color: silver;
    width: calc((100% / 3) - 2rem); /* calco para descontar a margem da largura do box se aumenta a marge tem que ajustar aqui tb */
}

<div class="wrapper">
    <div class="box">imte 1</div>
    <div class="box">imte 2</div>
    <div class="box">imte 3</div>
    <div class="box">imte 4</div>
    <div class="box">imte 5</div>
    <div class="box">imte 6</div>
    <div class="box">imte 7</div>
</div>