If you want to divide the content of the .container into 2 columns, you can add the following styles:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.container div {
display: inline-grid;
}
To implement this without those classes, you can include them in your stylesheet and use JavaScript to group them into two. Here's how you do it:
Create a function that counts the number of divs within the .container class using jQuery:
let all = $('.container').children('div').length;
Then, divide the total by 2 to determine the first column:
let col1 = all/2;
Round up the value to handle odd numbers properly. For example, if there are 10 divs, col1 will be 5. If there are 9 divs, col1 will still be 5.
col1 = Math.ceil(col1);
Next, apply the necessary styles using a loop and wrap them with another div block with these styles:
$(document).ready(function(){
let all = $('.container').children('div').length;
let col1 = all/2;
col1 = Math.ceil(col1);
for(let i = 0; i < all; i++){
if(i < col1){
$('.container').children('div').eq(i).addClass('col1');
}
else {
$('.container').children('div').eq(i).addClass('col2');
}
}
$('.container').children('.col1').wrapAll('<div class="col-first">');
$('.container').children('.col2').wrapAll('<div class="col-second">');
});
.container {
display: flex;
flex-direction: row;
width: 100%;
}
.col-first, .col-second {
display: flex;
flex-direction: column;
width: 50%;
}
/* Additional styles (optional) */
.container .elem {
display: block;
width: 50px;
height: 60px;
position: relative;
background-color: green;
margin: 4px;
}
.col-second .elem.col2 {
background-color: steelblue;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div class="container">
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>
I've included '.elem' classes so you can observe how the elements behave.