Segue uma solução CSS3 que leva em conta vários fatores:
Largura variável: você pode mexer no tamanho da UL, que as células acompanharão;
Segurança ao definir os 50% para não "estourar" o espaço disponível por inconsistências do browser;
Inclui a solução para o "quadriculado" das cores em CSS (mesmo que seja só pra ilustrar, é legal saber como se faz);
html, body, ul { /* aqui o que importa é o UL, o resto é pra estética do demo. */
position:relative; /* reset do position, não relacionado ao demo, mas bom pra uso geral. */
margin:0; /* Zeramos as margens e o padding do UL para as células.encostarem */
padding:0;
width:100%; /* por default, os blocos são 100%, mas vamos garantir isso. */
height:100%; /* aqui foi feito pra fins de demonstração apenas. */
}
li {
display:block; /* primeiro passo, transformar o LI em bloco. */
list-style-type: none; /* depois, remoção dos bullets. */
margin:0;
padding:10px; /* nao queremos espaços ente os blocos. */
background-color:#666; /* cor de fundo principal, o "grid" fazemos depois */
box-sizing: border-box; /* medidas são de borda à borda, o padding não é acrescentado. */
height:25%; /* esta linha é pela estética do demo */
}
li:nth-child(odd) { /* este css será aplicato nos LI impares (1, 3, 5... ). */
clear:both; /* forçamos a quebra de linha por segurança... */
float:left; /* ... e o alinhamos à esquerda. */
width:50%; /* Aplicamos 50% na esquerda, os da direita "herdam" o resto. */
}
li:nth-child(4n+2), /* aqui pulamos de 4 em 4 itens começando do 2 ( 2, 6, ...). */
li:nth-child(4n+3) { /* aqui de 4 em 4 começando do 3 ( 3, 7, ... ) */
background-color:#444; /* e mudamos a cor, dando efeito de quadriculado */
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>