div classes and CSS rows

Question

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?

score 0 · Answer 1 · edited Jan 28 '22 at 19:15

0

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);

edited Jan 28 '22 at 19:15

Roko C. Buljan

196,159
39
305
313

answered Jan 28 '22 at 19:07

J Davies

219
1
7

instead of `1fr 1fr 1fr` you can also use `repeat(3, 1fr)` - it's easier to change that `3` in one place, or pass it as a variable than having to add another rule when the necessity comes to wrap them as `1` `2` `4` etc... – Roko C. Buljan Jan 28 '22 at 19:10

div classes and CSS rows

1 Answers1