How to display WordPress archive into three columns [closed]

There is a great post here: https://digwp.com/2010/03/wordpress-post-content-multiple-columns/ on how to do just that.

The way I use most often is number 3. It’s a bit involved, but here are the steps. For more in depth coverage (which you’ll probably want), check out the post.

1. Add the my_multi_col_v2 function to your functions.php file

   function my_multi_col_v2($content){
       // run through a couple of essential tasks to prepare the content
       $content = apply_filters('the_content', $content);
       $content = str_replace(']]>', ']]>', $content);
   
       // the first "more" is converted to a span with ID
       $columns = preg_split('/(<span id="more-\d+"><\/span>)|(<!--more-->)<\/p>/', $content);
       $col_count = count($columns);
   
       if($col_count > 1) {
           for($i=0; $i<$col_count; $i++) {
               // check to see if there is a final </p>, if not add it
               if(!preg_match('/<\/p>\s?$/', $columns[$i]) )  {
                   $columns[$i] .= '</p>';
               }
               // check to see if there is an appending </p>, if there is, remove
               $columns[$i] = preg_replace('/^\s?<\/p>/', '', $columns[$i]);
               // now add the div wrapper
               $columns[$i] = '<div class="dynamic-col-'.($i+1).'">'.$columns[$i].'</div>';
           }
           $content = join($columns, "\n").'<div class="clear"></div>';
       }
       else {
           // this page does not have dynamic columns
           $content = wpautop($content);
       }
       // remove any left over empty <p> tags
       $content = str_replace('<p></p>', '', $content);
       return $content;
       }
   

2. Replace your the_content() tag in your page template with this:

   $content = get_the_content('',FALSE,''); // arguments remove 'more' text
   echo my_multi_col_v2($content);
   

3. Add some CSS to format the markup into columns

   /* dynamic columns */
   div.dynamic-col-1 { float: left; width: 38%; padding-right: 2%;}
   div.dynamic-col-2 { float: left; width: 38%;padding-right: 2%;}
   div.dynamic-col-3 { float: left; width: 20%;}
   div.clear { clear: both; }
   

4. Remember to add the two <!--more--> tags in your post/page content to create the three columns.