html - pure grid list floating dynamic height doesn't work -

so want archive list dynamic height starts second line @ left side of page. bellow:

||  ||  ||   ||     ||  ||  ||  ||   || 

if use display: inline-block; vertical-align:top works, if put each block 25%, shows 3 blocks on 1 line. use float:left shows 4 blocks on 1 line, supposed to. breaks apart.

 ||  ||  ||   ||      ||           ||   || ||   || 

i tried plain html/css works, guess pure. can ?

code:

<ul> <li class="pure-u-md-6-24">1teskts<br/>teksts</li> <li class="pure-u-md-6-24">2teskts<br/>tekstteskts<br/>tekststeskts<br/>tekststeskts<br/>tekstss</li> <li class="pure-u-md-6-24">3teskts<br/>teksts</li> <li class="pure-u-md-6-24">4teskts<br/>teksts</li> <li class="pure-u-md-6-24">5teskts<br/>teksts</li> <li class="pure-u-md-6-24">6teskts<br/>tekstteskts<br/>tekststeskts<br/>tekststeskts<br/>tekstss</li> <li class="pure-u-md-6-24">7teskts<br/>teksts</li> 

css

    ul{     padding:0; }     li {         display: inline-block;         vertical-align: top;         background: #e5e5e5;         float:left;         margin-bottom: 20px;     }