Skip to content

Instantly share code, notes, and snippets.

@klaasvw
Forked from jensimmons/views-view-grid.tpl.php
Created August 20, 2012 14:27
Show Gist options
  • Save klaasvw/3404710 to your computer and use it in GitHub Desktop.
Save klaasvw/3404710 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): ?>
<?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>
// 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%;
}
@klaasvw
Copy link
Author

klaasvw commented Aug 21, 2012

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

@sveldkamp
Copy link

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!

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