css3 - Masonry-like unordered list only css -

css3 - Masonry-like unordered list only css -

i've heard of masonry, i've heard of css3 columns, know if can utilize unordered list generate masonry-like grid or layout.

consider following: have list 8 items. each row has 4 items , has unknown height. if list items displayed inline-block, next row pushed downwards if item upper row contains larger height.

the result this:

you see how sec row pushed down? first item pushed downwards while rest remains in place.

desired outcome:

here's demo list:

<ul> <li style="height:125px;"></li> <li></li> <li></li> <li></li> <li></li> <li>this should pulled maintain margin bottom</</li> <li>this should pulled maintain margin bottom</</li> <li>this should pulled maintain margin bottom</</li> </ul> ul { list-style: none; font-size: 0; /** inline-block hack **/ } ul li { font-size: 14px; display: inline-block; vertical-align: top; margin-right: calc((20px / 3) - 5px); margin-bottom: 5px; height: 100px; width: calc(25% - 5px); border: 1px solid #222; } ul li:nth-child(4n + 4) { margin-right: 0; }

fiddle

if don't want list elements ordered horizontally, can help. utilize collumns it.

you want wrap list in container , utilize collumn-count on it.

i wrote codepen using tecnique create masonry effect.

if want gap alter cap-property gabs between rows, top , bottom add together margins list elements.

css css3