PHP Grid Builder

grid.php

<?php

$column_width = 60;
$gutter_width = 20;
$columns = 12;

if ( isset($_GET['column_width']) ) {
  $column_width = $_GET['column_width'];
}
if ( isset($_GET['gutter_width']) ) {
  $gutter_width = $_GET['gutter_width'];
}
if ( isset($_GET['columns']) ) {
  $columns = $_GET['columns'];
}

$margin = $gutter_width / 2;

$width = $columns * ($column_width + $gutter_width);
?>
body {
  min-width: <?php print $width; ?>px;
}

/* Containers */
.container_<?php print $columns; ?> {
	margin-left: auto;
	margin-right: auto;
	width: <?php print $width; ?>px;
}

/* Grid >> Global */
<?php

$column_list = array();
$push_list = array();
$pull_list = array();
$column_widths = array();

for ( $i = 1; $i <= $columns; $i++ ) {
  $column_list []= ".grid_$i";
  $push_list []= ".push_$i";
  $pull_list []= ".pull_$i";
  $grid_width = $i * ($column_width + $gutter_width) - $gutter_width;
  $column_widths []= ".container_$columns .grid_$i { width:" . $grid_width . "px; }";
}

$prefix = array();
$suffix = array();

for ( $i = 1; $i < $columns; $i++ ) {
  $prefix []= ".container_$columns .prefix_$i { padding-left:" . $i * ($column_width + $gutter_width) . "px; }";
  $suffix []= ".container_$columns .suffix_$i { padding-right:" . $i * ($column_width + $gutter_width) . "px; }";
  $push []= ".container_$columns .push_$i { left:" . $i * ($column_width + $gutter_width) . "px; }";
  $pull []= ".container_$columns .pull_$i { left:-" . $i * ($column_width + $gutter_width) . "px; }";
}

print implode(",\n", $column_list);
?> {
	display:inline;
	float: left;
	position: relative;
	margin-left: <?php print $gutter_width / 2;?>px;
	margin-right: <?php print $gutter_width / 2;?>px;
}

<?php

print implode(",\n", array_merge($push_list, $pull_list));
?> {
	position:relative;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last) */

.alpha { margin-left: 0; }
.omega { margin-right: 0; }

<?php
print implode("\n", $column_widths) . "\n" . 
      implode("\n", $prefix) . "\n" . 
      implode("\n", $suffix) . "\n" .
      implode("\n", $push) . "\n" .
      implode("\n", $pull) . "\n";
?>

/* Clear Floated Elements */
/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}