¿Cómo usar el bucle de wordpress con el arranque del sistema de cuadrícula?

quiero mostrar una fila de tiras con dos columnas que contienen contenido de bucle de wordpress (título, extracto en bloques verdes) cada fila tiene columnas con fondo blanco y gris que se invierten en cada fila como el tablero de ajedrez.

ver la imagen para más detalles.

RESPUESTA EDITADA

Creo que esto es lo que estás buscando. Esto recorre todas las publicaciones que tiene y luego las ordena de la forma en que se ve su boceto.

<div class="container">
    <?php
       $args = array(
           'post_type' => 'post' // Get only posts
       );

       $the_query = new WP_Query ( $args ); // build query

       $count = $the_query->post_count; // Check number of posts

   <style>
       .row:nth-child(even) .col-5:nth-child(even) { /* Select every even row and and even post */
           background: #ddd;
       }

       .row:nth-child(odd) .col-5:nth-child(odd) { /*  Select every odd row and odd post*/
           background: #ddd;
       }
   </style>
       <?php
           while ( $the_query -> have_posts() ) : $the_query -> the_post();
               $post_index = $the_query->current_post + 1; // $current_post = gets the post index in loop

               if ( $post_index % 2 != 0 ) { // Open div if post is odd
                    echo '<div class="row" style="border: 2px solid red; padding: 20px; margin:30px;">';
               }

               if ( $post_index % 2 != 0) { // If post is odd then give one class
       ?>                
                   <div class="col-xs-5 <?php echo "post_$post_index" ?>" style="border: 1px solid green;">
                       <h2><?php the_title(); ?></h2>
                       <p><?php the_excerpt(); ?></p>
                   </div>
          <?php
               } else {
          ?>
                   <div class="col-xs-5 col-xs-push-2 <?php echo "post_$post_index" ?>" style="border: 1px solid green;">
                       <h2><?php the_title(); ?></h2>
                       <p><?php the_excerpt(); ?></p>
                   </div>
          <?php } // End if ( $post_index % 2 != 0)

              if ( $post_index % 2 == 0 ) { // Close div if post is even
                  echo "</div>";
              }                      

       endwhile;
       wp_reset_postdata();
   ?>


        </div>
        <!-- /.container -->

RESPUESTA ORIGINAL

Este es el html que estás buscando. Simplemente cambie los nombres de las clases para que se ajusten a sus necesidades. Dado que es un bucle de WordPress, debe hacer declaraciones if else para saber cuándo comenzar una nueva fila y cuándo tener un color diferente para el fondo.

.row {
  border: 2px solid red;
  padding: 10px 20px;
  margin: 30px 0;
}

.col-xs-5 {
  border: 1px solid green;
  height: 100px;
}

.gray-bg {
  background: #ccc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
<div class="row">
  <div class="col-xs-5"></div>
    <div class="col-xs-5 col-xs-push-2 gray-bg"></div>
</div>
<div class="row">
    <div class="col-xs-5 gray-bg"></div>
      <div class="col-xs-5 col-xs-push-2"></div>
</div>
<div class="row">
    <div class="col-xs-5"></div>
      <div class="col-xs-5 col-xs-push-2 gray-bg"></div>
</div>
<div class="row">
    <div class="col-xs-5 gray-bg"></div>
    <div class="col-xs-5 col-xs-push-2"></div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>