Drupal 7 - Converting a Views Unformatted List Into Columns

1-template.php

<?php

/**
 * Implements hook_preprocess_views_view_unformatted().
 */
function YOUR_THEME_preprocess_views_view_unformatted(&$variables) {
  // Determine if this view's content should render in columns.
  // @see: _YOUR_THEME_views_columns();
  _YOUR_THEME_views_columns($variables, array(
    'articles|page' => 2,
    'articles|block_1' => 3,
  ));
}

/**
 * Separate the view content into columns.
 *
 * @param (array) $variables
 *   An associative array referencing the variables currently being preprocessed.
 * @param (array) $view
 *   An associative array containing the following syntax ($view_id => $columns):
 *     (string) $view_id: The view name in the format of: name|display_id.
 *                        Optional: |display_id. If omitted, all displays in the
 *                        view will be processed.
 *        (int) $columns: The number of columns to separate rows into. Value must
 *                        be larger than 1, obviously.
 * @param (bool) $render_empty
 *   A boolean switch determining whether to render empty columns, this typically
 *   happens when the view row count is smaller than the specified column count.
 *   Default: FALSE.
 */
function _YOUR_THEME_views_columns(array &$variables, array $views = array(), $render_all = FALSE) {
  // Initial value.
  $variables['columns'] = FALSE;
  // Do not process if there are no results.
  if (!$count = count($variables['view']->result)) {
    return;
  }
  // Check if this is a valid view to process.
  $view_id = $variables['view']->name . '|' . $variables['view']->current_display;
  if (!in_array($view_id, array_keys($views))) {
    if (!in_array($variables['view']->name, array_keys($views))) {
      return;
    }
    $view_id = $variables['view']->name;
  }
  // Get the number of columns and ensure it's an integer and greater than 1.
  if (!isset($views[$view_id]) || (is_int($views[$view_id]) && $views[$view_id] < 2)) {
    return;
  }
  // Create the columns.
  $columns = $views[$view_id];
  $limit = ($count % $columns == 0) ? $count / $columns : ceil($count / $columns);
  $current_column = 0;
  $current_row = 1;
  foreach ($variables['rows'] as $id => $row) {
    if ($current_row > $limit) {
      $current_column++;
      $current_row = 1;
    }
    $variables['columns'][$current_column][$id] = $row;
    $current_row++;
  }
  if ($render_all && $current_column < ($columns - 1)) {
    $diff = ($columns - 1) - $current_column;
    for ($i=0; $i < $diff; $i++) {
      $current_column++;
      $variables['columns'][$current_column] = array();
    }
  }
  // Generate column classes.
  $variables['columns_classes'] = array();
  $variables['columns_classes_array'] = array();
  foreach (array_keys($variables['columns']) as $id) {
    $html_id = $id + 1;
    $variables['columns_classes_array'][$id][] = 'views-column';
    $variables['columns_classes_array'][$id][] = 'views-column-' . $html_id;
    $variables['columns_classes_array'][$id][] = 'views-column-' . ($html_id % 2 ? 'odd' : 'even');
    if ($id == 0) {
      $variables['columns_classes_array'][$id][] = 'views-column-first';
    }
    if ($id == $current_column) {
      $variables['columns_classes_array'][$id][] = 'views-column-last';
    }
    $variables['columns_classes'][$id] = implode(' ', $variables['columns_classes_array'][$id]);
  }
}

2-views-view-unformatted.tpl.php

<?php

/**
 * @file
 * Default simple view template to display a list of rows in columns.
 *
 * @ingroup views_templates
 */

if (!empty($title)) {
  print '<h3>' . $title . '</h3>';
}
// Render columns if needed.
if ($columns) {
  print '<div class="view-columns view-columns-' . count($columns) . '">';
  foreach ($columns as $column_id => $rows) {
    print '<div' . ($columns_classes[$column_id] ? ' class="' . $columns_classes[$column_id] .'"' : '') . '>';
    foreach ($rows as $row_id => $row) {
      print '<div' . ($classes_array[$row_id] ? ' class="' . $classes_array[$row_id] .'"' : '') . '>' . $row . '</div>';
    }
    print '</div>';
  }
  print '</div>';
}
// Render normal view.
else {
  foreach ($rows as $id => $row) {
    print '<div' . ($classes_array[$id] ? ' class="' . $classes_array[$id] .'"' : '') . '>' . $row . '</div>';
  }
}

3-views-column.less

// TABLET AND UP
@media (min-width: 768px) {
  // View Columns
  .view-content > .view-columns {
    display: inline-block;
    *display: inline; // IE7 Hack
    *zoom: 1; // IE7 Hack
    width: 100%;
    .views-column {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      float: left;
    }
    &.view-columns-2 {
      .views-column {
        width: 50%;
      }
      .views-column-1 {
        padding-right: 10px;
      }
      .views-column-2 {
        padding-left: 10px;
      }
    }
    &.view-columns-3 {
      .views-column {
        width: 33.333%;
      }
      .views-column-1 {
        padding-right: 10px;
      }
      .views-column-2 {
        padding: 0 10px;
      }
      .views-column-3 {
        padding-left: 10px;
      }
    }
  }  
}

4-views-column.css

// TABLET AND UP
@media (min-width: 768px) {
  // View Columns
  .view-content > .view-columns {
    display: inline-block;
    *display: inline; // IE7 Hack
    *zoom: 1; // IE7 Hack
    width: 100%;
  }
  .view-content > .view-columns .views-column {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
  }
  .view-content > .view-columns .views-column.view-columns-2 .views-column {
    width: 50%;
  }
  .view-content > .view-columns .views-column.view-columns-2 .views-column-1 {
    padding-right: 10px;
  }
  .view-content > .view-columns .views-column.view-columns-2 .views-column-2 {
    padding-left: 10px;    
  }
  .view-content > .view-columns .views-column.view-columns-3 .views-column {
    width: 33.333%;
  }
  .view-content > .view-columns .views-column.view-columns-3 .views-column-1 {
    padding-right: 10px;
  }
  .view-content > .view-columns .views-column.view-columns-3 .views-column-2 {
    padding: 0 10px;
  }
  .view-content > .view-columns .views-column.view-columns-3 .views-column-3 {
    padding-left: 10px;
  }
}