title: WordPress display loop in 2 columns
body: <p>I know this question has been asked before. I checked through multiple answers on this site,
  for example:</p>
  
  <p><a href="https://stackoverflow.com/questions/54568904/wordpress-loop-with-different-bootstrap-columns">Wordpress loop with different bootstrap columns</a></p>
  
  <p><a href="https://wordpress.stackexchange.com/questions/222278/how-to-separate-posts-loop-in-to-two-columns/222281">https://wordpress.stackexchange.com/questions/222278/how-to-separate-posts-loop-in-to-two-columns/222281</a></p>
  
  <p>... but I cannot work out how to integrate answers with my code (assuming that is possible).</p>
  
  <p>I want to display a list of Categories and their related posts on a page.</p>
  
  <p>The code I'm using works fine BUT displays the results in a single column down the page: </p>
  
  <p><a href="https://i.stack.imgur.com/ukuUZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ukuUZ.jpg" alt="enter image description here"></a></p>
  
  <p>I want to split the display into 2 columns, like in the image below, if possible:</p>
  
  <p><a href="https://i.stack.imgur.com/dRfHK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dRfHK.jpg" alt="enter image description here"></a></p>
  
  <p>The code I'm using (currently placed in a new page template) is as follows:</p>
  
  <pre><code>&lt;?php
  
  /*
   * Template Name: Alphabetical List
  */
  
  get_header(); 
  
  // Grab all the categories from the database that have posts.
  $categories = get_terms( 'category', 'orderby=name&amp;order=ASC');
  // Loop through categories
  foreach ( $categories as $category ) {
  // Display category name
  echo '&lt;h2 class="post-title"&gt;' . $category-&gt;name . '&lt;/h2&gt;';
  echo '&lt;div class="post-list"&gt;';
  // WP_Query arguments
  $args = array(
    'cat' =&gt; $category-&gt;term_id,
    'order' =&gt; 'ASC',
    'orderby' =&gt; 'title',
  );
  
  // The Query
  $query = new WP_Query( $args );
  // The Loop
  if ( $query-&gt;have_posts() ) {
  while ( $query-&gt;have_posts() ) {
  $query-&gt;the_post();
  ?&gt;
  
  &lt;p&gt;&lt;a href="&lt;?php the_permalink();?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;?php
  } // End while
  } // End if
  echo '&lt;/div&gt;';
  // Restore original Post Data
  wp_reset_postdata();
  } // End foreach
  
  get_footer(); 
  ?&gt;
  </code></pre>
  
  <p>Wondering if anyone can help me to get this code to display loop results in 2 columns. </p>
  
  <p>Many thanks.</p>
  
  <p><strong>UPDATE TO QUESTION</strong></p>
  
  <p>Karl, thanks for your answer. Your script works, but with a small problem:</p>
  
  <p>The Categories/Related Posts display in 2 columns but a 'gap/space' appears in the middle of the display of data (see image below):</p>
  
  <p><a href="https://i.stack.imgur.com/BWjin.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BWjin.jpg" alt="enter image description here"></a> </p>
  
  <p>I added to your code slightly so I could display a custom field I inserted into each post. I'm not sure if this has caused the problem.</p>
  
  <p>Altered code (changes are immediately after $query->the_post();):</p>
  
  <pre><code>&lt;?php
  
  /*
  * Template Name: Alphabetical List
  */
  get_header();
  ?&gt;
  
  &lt;div style="height:100px"&gt;&lt;/div&gt;
  
  &lt;?php
  // Grab all the categories from the database that have posts.
  $categories = get_terms( 'category', 'orderby=name&amp;order=ASC');
  // Loop through categories
  echo "&lt;div class='new-column'&gt;";
  $counter = 0;
  foreach ( $categories as $category ) {
  if($counter % 4 == 0 &amp;&amp; $counter !=0){
     echo "&lt;div class='new-column'&gt;";
  }
  // Display category name
  echo '&lt;h2 class="post-title"&gt;' . $category-&gt;name . '&lt;/h2&gt;';
  echo '&lt;div class="post-list"&gt;';
  // WP_Query arguments
  $args = array(
  'cat' =&gt; $category-&gt;term_id,
  'order' =&gt; 'ASC',
  'orderby' =&gt; 'title',
  );
  // The Query
  $query = new WP_Query( $args );
  // The Loop
  if ( $query-&gt;have_posts() ) {
  while ( $query-&gt;have_posts() ) {
  $query-&gt;the_post();
  
  $customfieldvalue = get_post_meta($post-&gt;ID, "PDF", true);
  
  ?&gt;
  &lt;p&gt;&lt;a href="&lt;?php echo $customfieldvalue; ?&gt;" target="_blank"&gt;&lt;?php 
  the_title(); ?&gt;&lt;/a&gt;&lt;/p&gt;
  
  &lt;?php
  } // End while
  } // End if
  echo '&lt;/div&gt;';
  // Restore original Post Data
  wp_reset_postdata();
  $counter++;
  if($counter % 4 == 0){
  echo "&lt;/div&gt;";
  }
  } // End foreach
  if($counter % 4 != 0){
  echo "&lt;/div&gt;";
  }
  get_footer(); 
  ?&gt;
  </code></pre>