div classes and CSS rows [duplicate] - html

Question

This question already has answers here:
Flexbox: 4 items per row
(10 answers)
How to display 3 items per row in flexbox?
(3 answers)
Closed last year.
If I have say 6 items within a div and I want to space 3 then 3 directly underneath can I use one div to contain my 6 total divs and space them to wrap under or do I need to have two separate divs to contain 3 in each?
I have tried to use a div to separate at 3 boxes in each div but I cannot get the boxes to line up.
What I am attempting to do is this-
box Box Box
box Box Box
currently it looks like this
box box box box box box
If I
.boxes {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
<div class="boxes">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<div class="box4">Box 4</div>
<div class="box5">Box 5</div>
<div class="box6">Box 6</div>
</div>
split the div class=boxes at 3 and create another for the last three boxes it will split into two rows, but I cannot get them to line up. is there a way to wrap around from the code I have written?

Answer 1

Use CSS Grid if you want to set the number of desired columns.
.boxes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<div class="boxes">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<div class="box4">Box 4</div>
<div class="box5">Box 5</div>
<div class="box6">Box 6</div>
</div>
If you prefer you can also use the CSS repeat() function:
grid-template-columns: repeat(3, 1fr);