I am not a big fan of bootstrap, so I was wondering if it is possible to achieve the layout without using it.
I have 6 divs that I want to arrange in 2 rows and 3 columns. I need the space between each row/column to be precise. While I can calculate this manually, I am curious if there is a better solution available.
Keep in mind that the height of .item being set at 50px in the example is just for demonstration purposes and is not defined in the actual code. The height adjusts based on the content within.
If I remove the specified height for .container, it will affect the horizontal blue line. I prefer not to rely on setting a height for .container.
Although it may be simple with some JavaScript to dynamically adjust the height, I would rather avoid that and stick to using the height of .container instead. Thank you!
.container {
display: flex;
justify-content: space-between;
align-content: space-between;
width: 500px;
height: 125px;
background: blue;
flex-wrap: wrap;
}
.item {
background: red;
width: 30%;
height: 50px;
}<div class='container'>
<div class='item'> item1 </div>
<div class='item'> item2 </div>
<div class='item'> item3 </div>
<div class='item'> item4 </div>
<div class='item'> item5 </div>
<div class='item'> item6 </div>
</div>EDIT: As it seems that achieving this without JS is not feasible, I will go ahead with using the height specified for .container. For those who prefer a JavaScript solution, here is a JQuery script:
$('.container').height(
$('.item').height() * 2 +
(($('.container').width() - 3 * $('.item').width()) / 2)
);
Thank you for your responses!