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): ?>
      <?php foreach ($columns as $column_number => $item): ?>
        <li class="<?php print $row_classes[$row_number]; ?> <?php print $column_classes[$row_number][$column_number]; ?>">
          <div class="grid-cell"><?php print $item; ?></div>
        </li>
      <?php endforeach; ?>
    <?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;
}
ul.views-view-grid li.col-first {
  clear: left;
}
ul.views-view-grid li.col-first div.grid-cell {
  padding-left: 0;
}
ul.views-view-grid li.col-last div.grid-cell {
  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%;
}

To make the HTML more valid I removed the span that replaced the original row. Clearing can also be done on the li.col-first class for a similar effect.

Added an additional div around the item to take care of padding.

CSS doesn't like the // comment style, so anyone viewing this should go with /* ... */ surrounding their comments instead. ul.views-view-grid {} above didn't work for me until I did!