Kindly review this code for additional details. Take a look at the image above for a clearer understanding. On the right side of the image, you will notice that the last row contains two items and the second row has one empty slot. I need to rearrange one list item to fill the empty position.
<style>
.main {
max-width: 900px;
padding: 20px;
margin: 0 auto;
background-color: aqua;
}
.main_inner {
display: flex;
border: 1px solid black;
flex-wrap: wrap;
}
.list {
min-width: 250px;
border: 1px solid #fff;
background-color: black;
color: #fff;
padding: 15px;
}
<div class="main">
<div class="main_inner">
<div class="list">List</div>
<div class="list">List</div>
<div class="list">List</div>
<div class="list">List</div>
<div class="list">List</div>
<div class="list">List</div>
</div>
<div class="main_inner">
<div class="list">List</div>
<div class="list">List</div>
<div class="list">List</div>
<div class="list">List</div>
<div class="list">List</div>
</div>
<div class="main_inner">
<div class="list">List</div>
<div class="list">List</div>
</div>