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);


<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

    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;                  /* 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                */
    }

<!-- language: lang-html -->

    <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>

<!-- end snippet -->