Como orientar objetos de uma grade?

[yuriw 0]

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

 

 

mas oque apenas estou conseguindo fazer é isto,

 

 

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?

[Bergs 53]

@yuriw será mais fácil fazer três blocos iguais ao do nº5 e dentro deles fazer os blocos menores entendeu?