Grid

\Kotchasan\Grid manages grid layouts.

Creation

use Kotchasan\Grid;

$grid = new Grid();
$grid->setCols(3);  // 3 columns

echo "Number of columns: " . $grid->getCols();  // 3

Constructor

$grid = new Grid();

Grid inherits from \Kotchasan\Template, so it can use Template methods.

Methods

setCols()

Set the number of columns.

$grid->setCols($cols);

Returns: Grid instance (for method chaining)

$grid->setCols(4)->render();

getCols()

Get the number of columns.

$cols = $grid->getCols();

Returns: int Current number of columns.

Usage Examples

Basic Grid

$grid = new Grid();
$grid->setCols(3);

// Use with Template methods
$grid->setTemplate('<div class="grid-item">{CONTENT}</div>');

Responsive Grid

// Define layout based on screen size
$cols = 4;  // Desktop
if ($isMobile) {
    $cols = 1;
} elseif ($isTablet) {
    $cols = 2;
}

$grid = new Grid();
$grid->setCols($cols);

Product Grid

$grid = new Grid();
$grid->setCols(4);

$products = getProducts();
$html = '<div class="product-grid" style="display: grid; grid-template-columns: repeat(' . $grid->getCols() . ', 1fr); gap: 20px;">';

foreach ($products as $product) {
    $html .= '<div class="product-item">';
    $html .= '<img src="' . $product->image . '" alt="' . $product->name . '">';
    $html .= '<h3>' . $product->name . '</h3>';
    $html .= '<p class="price">฿' . number_format($product->price, 2) . '</p>';
    $html .= '</div>';
}

$html .= '</div>';
echo $html;

CSS Grid Integration

$grid = new Grid();
$grid->setCols(3);

$cols = $grid->getCols();
echo '<style>
.grid-container {
    display: grid;
    grid-template-columns: repeat(' . $cols . ', 1fr);
    gap: 16px;
}
</style>';

Method Chaining

Grid supports fluent interface:

$html = (new Grid())
    ->setCols(4)
    ->render();

Related Classes

• Template - Parent class
• DataTable - Data tables
• HtmlTable - HTML tables