Would anyone use this style for actual tabular data? Smells like a table layout to me.

Comments

timmillwood’s picture

I don't think grid should be a table.

I am using a 10 column, custom 960 based grid. Here is the code I have used.

<?php
// $Id: views-view-grid.tpl.php,v 1.3 2008/06/14 17:42:43 merlinofchaos Exp $
/**
 * @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; ?>

<?php $grids = 10; ?>
<div class="views-view-grid">
    <?php foreach ($rows as $row_number => $columns): ?>
      
       <?php
        $row_class = 'row-' . ($row_number + 1);
        if ($row_number == 0) {
          $row_class .= ' row-first';
        }
        elseif (count($rows) == ($row_number + 1)) {
          $row_class .= ' row-last';
        }
      ?>
	        <?php $grid = $grids / count($columns); ?>
        <?php foreach ($columns as $column_number => $item): ?>
          <div class="<?php print 'grid_'. $grid; ?> <?php if($column_number == 0){ print 'alpha'; } ?> <?php if(($column_number + 1)  == count($columns)){ print 'omega'; } ?>">
            <?php print $item; ?>
          </div>
        <?php endforeach; ?>

    <?php endforeach; ?>
</div>
mortendk’s picture

Hey
well as long as we know its a table i think its okay - maybe the style should be called "grid - table instead" ?

im gonna work the code in, unless you wanna add a template for me - just without all that grid stuff in it ;)

zoo33’s picture

I think I prefer the template below. It's a little more in the Views/Drupal tradition: lots of classes, just the way mortendk likes it! :) Seriously, this may not be the Mothership way, but I'm putting it here for reference.

<?php
// $Id$
/**
* @file views-view-grid.tpl.php
* View template to display 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; ?>

<?php $grid_cols = count(current($rows)); ?>
<div class="views-view-grid views-view-grid-<?php print $grid_cols; ?>-cols clear-block">
  <?php foreach ($rows as $row_number => $columns): ?>
    <?php
      $row_class = 'row-' . ($row_number + 1);
      if ($row_number == 0) {
        $row_class .= ' row-first';
      }
      elseif (count($rows) == ($row_number + 1)) {
        $row_class .= ' row-last';
      }
    ?>
    <?php foreach ($columns as $column_number => $item): ?>
      <?php 
        $col_class = ' col-' . ($column_number + 1);
        $col_class .= $column_number == 0 ? ' col-first' : '';
        $col_class .= $column_number + 1 == count($columns) ? ' col-last' : '';
      ?>
      <div class="views-row <?php print $row_class . $col_class; ?>">
        <?php print $item; ?>
      </div>
    <?php endforeach; ?>

  <?php endforeach; ?>
</div>

Combine this with some general CSS like:

.views-view-grid .views-row { float: left; }
.views-view-grid-1-cols .views-row { float: none; }
.views-view-grid-2-cols .views-row { width: 49%; }
.views-view-grid-3-cols .views-row { width: 32%; }
.views-view-grid-4-cols .views-row { width: 24%; }
.views-view-grid-5-cols .views-row { width: 19%; }
/* Keep rows aligned even if the individual divs are not the same height. */
.views-view-grid .col-first { clear: left; }
.views-view-grid .col-last { clear: right; }

Obviously there has to be margins and such, but that's more site specific.

mortendk’s picture

well with a tiny bit of settings this could actually work for both worlds... me better think a bit :)

mortendk’s picture

Status: Active » Closed (won't fix)
lx24’s picture

Created my own module instead for this, adds a css grid plugin style for Views (3)

css grid module

outputs:

<div class="views-view-css-grid cols-3">
  <div class="col col-1 col-first">
  <div class="col col-2">
  <div class="col col-3 col-last">
  <div class="clearfix"></div>
  <div class="col col-1 col-first">
  <div class="col col-2">
  <div class="col col-3 col-last">
  <div class="clearfix"></div>
</div>