Struggling to make a section of my website responsive and encountering an issue that's proving difficult to solve.
The current setup involves 3 rectangular inline-block divs per "row" with a margin-right of 100px in a wrapper, all dynamically added. When resizing the window, the third div is pushed under the row as expected due to lack of space.
However, the goal is to reduce the margin-right incrementally until it reaches 20px between the divs, at which point the third div should move to the second row. The process should then repeat as needed: enlarging the margin until it doesn't fit, moving the second div down, and so forth.
Html:
<div id="wrapper">
<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 class="box"></div>
</div>
CSS:
.box{
width:100px;
height:150px;
background-color:red;
display:inline-block;
margin-right:96px;
}
.box:nth-child(3n+3) {
margin-right: 0px;
}
#wrapper{
height:500px;
width:500px;
background-color: #eee;
}
Fiddle Link: https://jsfiddle.net/wucz4nhs/1/
To better illustrate, here are some images:
Initial setup: https://i.sstatic.net/PqAcA.png
Smaller spacing between elements upon resizing: https://i.sstatic.net/51ybx.png
Transition to 2 divs per row when space runs out: https://i.sstatic.net/tcbo6.png