I have been scouring the internet for hours, gathering a lot of information, but unfortunately, I haven't found exactly what I'm looking for.
I have implemented this specific code in my WordPress website
Additionally, I have integrated infinite scroll, and when I scroll, the second page displays like this:
https://i.sstatic.net/Wloj2.png
The issue I am facing is the large white space. I want to remove it and have the posts align with the posts on the first page.
HTML:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS:
body {
background: white;
padding: 5px;
margin: 0;
}
.container {
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;
}
.item {
display: inline-block;
background: black;
margin: 0 0 5px 0;
padding: 10px;
color: white;
}