CSS grid with inline-blocks

HTML

<ul>
    <li><img src="lalala.png" alt=""><span>Lalalala  Lalalala</span></li>
    <li><img src="lalala.png" alt=""><span>asdasdasad </span></li>
    <li><img src="lalala.png" alt=""><span>Lalalala asd asd </span></li>
    <li><img src="lalala.png" alt=""><span>Lala lala</span></li>
    <li><img src="lalala.png" alt=""><span>Lalalala</span></li>
    <li><img src="lalala.png" alt=""><span>Lalalala  Lalalala</span></li>
    <li><img src="lalala.png" alt=""><span>asdasdasad </span></li>
    <li><img src="lalala.png" alt=""><span>Lalalala asd asd </span></li>
    <li><img src="lalala.png" alt=""><span>Lala lala</span></li>
    <li><img src="lalala.png" alt=""><span>Lalalala</span></li>
</ul>

CSS

* {
    margin:0;
    padding:0;
}

ul {
    width:400px;
    list-style:none;
    /* ====
    Since inline blocks are white-space sensitive,
    we fix it by applying inline-level properties
    
    http://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/
    ==== */
    letter-spacing:-.34em;
    word-spacing:-.34em;
}
    li {
        display:inline-block;
        /* inline-block for the less capable browsers */
        *display:inline;
        *zoom:1;
        width:90px;
        margin:0 10px 0 0;
        /* we then reset the values to not affect actual text content */
        letter-spacing:normal;
        word-spacing:normal;
        vertical-align:top;
    }
    img {
        display:block;
        width:90px;
        height:90px;
        background:#000;
    }