Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save scottpayne/5282618 to your computer and use it in GitHub Desktop.
Save scottpayne/5282618 to your computer and use it in GitHub Desktop.
<?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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment