HTML creating 2 rows with contents in div - html

Question

Fairly new to HTML and coding..
I'm having trouble with a box that needs to display 8 items within it as 2 rows:
I have 8 divs (class="item_css") within a div(class="example_box"), how do I display the 8 items in 2 rows, so it shows a row of 4 and then another 4.
I want to avoid using the 'rows' class. What would be the best way to do this?
CSS
* {
margin: 0;
padding: 0;
}
.body_background {
background-color: bisque;
}
.example_banner {
background-color: rgb(247, 245, 245);
height: auto;
width: 100%;
margin: 3% auto;
padding: 4% 0%;
box-shadow: 0px 2px 5px #cccccc;
}
.example_banner_label {
text-align: center;
margin: 2px auto 25px;
}
.example_banner_heading {
font-size: 30px;
text-align: center;
margin: 0% auto;
color: rgb(7 29 148);
text-shadow: 1px 1px #c7c7c7;
}
.example_banner_box {
width: 90%;
height: auto;
margin: 0% auto;
padding: 0%;
}
.example_banner_frame {
display: flex;
position: relative;
height: auto;
width: 1200px;
margin: 0% auto;
padding: 0px;
text-align: center;
background-color: #ffffff;
border: 1px solid #b7b7b7;
}
.example_banner_frame_maincontents {
width: 300px;
height: 450px;
}
div.example_consumer_banner {
width: 300px;
height: 60px;
padding: 10px;
font-size: 25px;
margin: 0%;
text-align: center;
color: white;
background-color: #193cad;
}
.example_consumer_img_label {
width: 20%;
position: absolute;
top: 25%;
left: 10%;
transform: translate(-50%, -50%);
font-size: 25px;
font-family: "Montserrat", sans-serif;
text-align: center;
color: rgb(255 255 255);
text-decoration: none;
text-shadow: -3px 4px 3px rgb(0 0 0);
}
.example_box {
width: 75%;
height: 450px;
background-color: #00b6f3;
}
.item_css {
width: 25%;
height: 150px;
margin: 0%;
padding: 3px;
}
HTML
<section class="main_body">
<div class="body_background">
<div class="row" id="merch_rows">
<div class="example_banner">
<div class="example_banner_frame">
<div class="example_banner_frame_maincontents">
<div class="example_consumer_banner" for="">Lorem ipsum</div>
<img src="" class="example_consumer_picture">
<label class="example_consumer_img_label" for="example_consumer_picture">Lorem ipsum dolor sit amet consectetur </label>
</div>
<div class="example_box">
<div class="item_css" style="color: red; border: 1px solid grey;">1
</div>
<div class="item_css" style="color: orange;border: 1px solid grey;">2
</div>
<div class="item_css" style="color: green;border: 1px solid grey;">3
</div>
<div class="item_css" style="color: yellow;border: 1px solid grey;">4
</div>
<div class="item_css" style="color: blue;border: 1px solid grey;">5
</div>
<div class="item_css" style="color: black;border: 1px solid grey;">6
</div>
<div class="item_css" style="color: grey;border: 1px solid grey;">7
</div>
<div class="item_css" style="color: pink;border: 1px solid grey;">8
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

Just a simple example on flexbox:
.example_box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item_css {
width: 24%;
margin-bottom: 10px;
}
or grid:
.example_box {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}

Answer 2

Flexbox would do this.
https://jsfiddle.net/za678wcL/
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.box {
background-color: green;
height: 50px;
width: calc(25% - 20px);
margin: 10px;
}