Como orientar objetos de uma grade?

Estou tendo dificuldade em criar uma grade como está abaixo,

/applications/core/interface/imageproxy/imageproxy.php?img=https://lh5.googleusercontent.com/-o3t9DGF7TTE/UOd23jNjxAI/AAAAAAAADds/CYT9p8lU95M/s900/grade.jpg&key=c5d46ac3bb3db09c2c5a9f98d63ca0709eda6f06cbb7e46253c56d4e013d1287" alt="grade.jpg" />

mas oque apenas estou conseguindo fazer é isto,

/applications/core/interface/imageproxy/imageproxy.php?img=https://lh6.googleusercontent.com/-94CILny9EyY/UOd48BwW2cI/AAAAAAAADeA/h8kq4Ye_Bjc/s900/gradefail.jpg&key=f4dd9adda0a91546eb219f3a32301f9200b8ddfe8625c365c00cf56c6bf2c14f" alt="gradefail.jpg" />

Não entendo qual o erro, meu CSS está assim:

ul { list-style:none; margin:0 padding:0; }
#grid { position:absolute; overflow-y:hidden; overflow-x:scroll; width:100%; height:80%; float:left }
#grid ul.grid-scroll { position:absolute; width:2000px; height:50%; padding-left:2px; }
#grid ul.grid-scroll li { position:relative; background:#000; color:#FFF; width:220px; height:220px; margin:2px; float:left }
#grid ul.grid-scroll .featured { width:432px; height:432px; margin:2px; float:left }

E o body está assim:

<div id="grid">
 <ul class="grid-scroll">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li class="featured">5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 </ul>
</div> <!-- #grid -->

Alguém poderia me ajudar?