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%;
}

Regarding fixed vs fluid vs responsive:

View's default Grid uses table HTML, which is fixed-width — the width of that table.

My replacement code creates a fluid grid of content — at the set number of columns that you specify in the View itself. It's a good start for responsive web design, but it's not responsive. It's fluid.

For responsive web design, I prefer to create a grid that changes in the number of columns it has based on the screen size. On a narrow screen, maybe you only want 1 column, or 2. On a medium-sized screen 3 or 4 might work great. And then on a giant monitor or TV, maybe you want 5 or 7 columns of content.

Sadly this approach does't take you that far. It's sticking pretty closely to the architecture that Views already has in place — just getting rid of the table HTML and replacing it with a fixed-number-of-columns fluid grid.

I think that inserting a /span between /ul and /li is not correct HTML. Why do you insert this /span? Is it necessary?

Rvilar — yeah, I agree. It's not really correct HTML. I put it there because it mirrors how the current views-view-grid.tpl.php works. The older version has a table row beginning and ending where I put a span. I did that so that each "row" could have a clearfix class on it, and clear the row above no matter how uneven the content is.

I believe better technique is to have it all be simple list markup, with few or no classes, and use CSS & pseudo-classes to style everything. That's what I do when I create custom themes — switch all the grid views to list views and write custom CSS.

I've been debating what to do for my base theme. In the past I've ended up trying to ban developers from using views grid (which doesn't work), having to go in behind them all to redo all their views, and then writing similar custom CSS over and over again from scratch to make the list styled into a grid. I'm looking for a way to prevent hassle and redundancy.

The code that I posted above takes a conservative approach — half fixing the situation and sticking pretty closely to how Views is already built. I'll have to think more about what could be done instead...

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.