How do you split multiple-column loop on category archive page?

I am creating a custom page template with multiple loop like this

You can see there are posts split up into multiple columns: One featured post, then 2 posts, and then 4 posts on right side.

I could only get posts into 2 column.

Can you please explain how to split loop in multiple columns like
this ?

Solutions Collecting From Web of "How do you split multiple-column loop on category archive page?"

The Basics

Columns are managed by CSS. So if you’re using a css framework, like Bootstrap, Blueprint CSS or any other, than you’ve some classes that you can add to an article/post container, so that they float in the desired amount of columns.

Blueprint CSS

In the case of Blueprint Css, this might be span-8 (3 column layout on 24 column grid) with a class of last attached to your last post in a row.

Twitter Bootstrap

In the case of Twitters Bootstrap, it’s span4 (3 column layout on 12 column grid) with a container, that wraps every row and has the class row.

How it works

So you need to determine, on which post you’re (inside you query – keep in mind, that counting starts in most programming languages with 0 for the 1st item) and then add the class (or insert the MarkUp) to the specific post. To all other posts, you just add a default class or MarkUp.

Explanation of the example

In the below example, we’re using the $wpdb global, which holds the instance of the database functions. This way we can check the instances var current_post to get the counter. Then we use ++ to increment the counter.

How-to apply classes using the core API

Everything then goes into post_class(), which echos a standard set of WPs internal classes – as well as the custom (CSS framework specific) classes that we added – and adds the class="wp-internal-classes and custom-classes" to the container (div or article).

A (maybe) best practice example

global $wpdb;
if ( have_posts() )
    while ( have_posts() )

        $class  = get_post_format();
        // Current post: starts with index 1 - fixing the fact, that PHP starts with 0 else.
        $class .= 0 === ( ++$wpdb->current_post % 3 ) ? ' special-class' : '';

        <!-- Open Post Container -->
        <article <?php post_class( "span4 post{$class}" ); ?> id="post-<?php the_ID(); ?>">

            <!-- [B] HERE YOU CAN ADD YOUR ACTUAL POST -->

        <!-- // Close Post Container -->

Code based on this answer, needs further adaptations but demonstrates the concept:

$count = 0;
while ( have_posts() ) : the_post();

if ( $count < 1 ) {
  // first post
  echo '<div id="left-column">';
} elseif ( $count <= 2 ) {
  // next 2 posts
  if( $count == 2) echo '</div><!-- end left-column -->';
} else {
  // rest of the posts
  if( $count == 3) echo '<div id="right-column">';

echo '</div><!-- end right-column -->';