Today I attempted to recreate the two-column layout seen in Google Plus post history.
Initially, I tried using column-count, but encountered an issue where the divs were printing one behind the other in the left column before moving to the right column once the first was filled. Although this method correctly filled the space between the divs, it did so in the incorrect order.
Next, I experimented with utilizing bootstrap and pure CSS for responsive grid design, however, I found that there was empty space between divs within the same column (particularly when one div had greater height than its neighbor).
I really need to replicate the system used on Google Plus. Thank you in advance for any suggestions, and have a wonderful day.
.multicols {
padding:0;
column-width: 50%;
column-count: 2;
-webkit-column-width:50%;
-webkit-column-count: 2;
-moz-column-width:50%;
-moz-column-count: 2;
-ms-column-width:50%;
-ms-column-count: 2;
-o-column-width:50%;
-o-column-count: 2;
column-gap: 0;
-webkit-column-gap: 0;
-moz-column-gap: 0;
-ms-column-gap: 0;
-o-column-gap: 0;
vertical-align:text-top;
}
.multicols .amulticol {
display: inline-block;
margin:0;
min-height: 100px;
break-inside: avoid;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-ms-column-break-before: avoid;
-o-column-break-before: avoid;
}
To view the code that is causing issues, please visit: jsfiddle.net/PsL8H