Switching Drupal Views Grid to unordered lists

views-view-grid.tpl.php

<?php
/**
 * @file views-view-grid.tpl.php
 * Default simple view template to display a rows in a grid.
 *
 * - $rows contains a nested array of rows. Each row contains an array of
 *   columns.
 *
 * @ingroup views_templates
 */
?>
<?php if (!empty($title)) : ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<ul class="<?php print $class; ?>"<?php print $attributes; ?>>
    <?php foreach ($rows as $row_number => $columns): ?>
      <span class="<?php print $row_classes[$row_number]; ?> clearfix">
        <?php foreach ($columns as $column_number => $item): ?>
          <li class="<?php print $column_classes[$row_number][$column_number]; ?>">
            <?php print $item; ?>
          </li>
        <?php endforeach; ?>
      </span>
    <?php endforeach; ?>
</ul>

your.css

// Then you need this CSS to go with it:

* { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -o-box-sizing: border-box; 
  box-sizing: border-box; 
} 
// This switched box models. The code below assumes this change has been made.
// http://paulirish.com/2012/box-sizing-border-box-ftw

img {
  max-width: 100%;
  height: auto;
} // This makes the images fluid

ul.views-view-grid {
  padding-left: 0;
  list-style: none;
  list-style-image: none;
}
ul.views-view-grid li {
  float: left;
  padding: 0 0.5em;
}
ul.views-view-grid li.col-first {
  padding-left: 0;
}
ul.views-view-grid li.col-last {
  padding-right: 0;
}
.view ul.cols-2 li {
  width: 50%;
}
.view ul.cols-3 li {
  width: 33.3333%;
}
.view ul.cols-4 li {
  width: 25%;
}
.view ul.cols-5 li {
  width: 20%;
}
.view ul.cols-6 li {
  width: 16.6666%;
}
.view ul.cols-7 li {
  width: 14.2857%;
}
.view ul.cols-8 li {
  width: 12.5%;
}
.view ul.cols-9 li {
  width: 11.1111%;
}
.view ul.cols-10 li {
  width: 10%;
}

Thanks, Jen. This is a great drop-in solution!

I saw a trick in this Omega Theme tutorial that might eliminate the span here: simply adding clear:left to the .col-first class should bring the first column over where it belongs for each row.

Thanks for the great drop-in replacement.

I've forked your code and did something similar to what micahw156 suggests. The additional spans are removed and the li now gets a child div that takes care of padding. Each li.col-first clears the previous line similar to how the tables rows worked previously.