Skip to content

Instantly share code, notes, and snippets.

@jensimmons
Created April 3, 2012 21:00
Show Gist options
  • Save jensimmons/2295479 to your computer and use it in GitHub Desktop.
Save jensimmons/2295479 to your computer and use it in GitHub Desktop.
Switching Drupal Views Grid to unordered lists
<?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>
// 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%;
}
@klaasvw
Copy link

klaasvw commented Aug 21, 2012

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment