Is it possible to create equal space between div elements while also ensuring that the spacing adjusts based on the width of the browser?
The goal is to center the divs and have consistent left and right margins that change depending on the browser width.
Additionally, the number of columns should adapt according to the browser width.
The height of each div with the class .box varies, indicated by the use of the <br> tag for demonstration purposes.
.under {
width:70%;
margin:auto;
padding-top:40px;
padding-bottom:40px;
text-align:center;
border: 1px solid green;
overflow:auto;
justify-content: center;
position:relative;
column-count: 5;
}
.box {
text-align:center;
width:314px;
padding:10px;
margin:10px;
display:inline-block;
box-shadow: 0px 5px #1c1c1c, 0px -2px #1c1c1c;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
background-color: #363636;
border: 0px solid red;
}
@media screen and (max-width: 2450px) {
.under {
column-count: 4;
}
}
@media screen and (max-width: 1900px) {
.under {
column-count: 3;
}
}
@media screen and (max-width: 1350px) {
.under {
column-count: 2;
}
}
@media screen and (max-width: 900px) {
.under {
column-count: 1;
}
}
body {
height:100%;
padding:0px;
margin:0px;
flex-direction:column;
justify-content:center;
background-color:#262626!important;
color:#ddd!important;
font-family: 'Jost', sans-serif;
}<div class="under">
<div class="box">Flex item 1</div>
<div class="box">Flex item 2<br><br><br>end</div>
<div class="box">Flex item 3</div>
<div class="box">Flex item 4</div>
<div class="box">Flex item 5<br><br/>end</div>
<div class="box">Flex item 6</div>
<div class="box">Flex item 7</div>
<div class="box">Flex item 8</div>
<div class="box">Flex item 9<br><br><br><br>end</div>
<div class="box">Flex item 10</div>
<div class="box">Flex item 11</div>
<div class="box">Flex item 12</div>
</div>