Grid

\Kotchasan\Grid สำหรับจัดการ grid layout

การสร้าง

use Kotchasan\Grid;

$grid = new Grid();
$grid->setCols(3);  // 3 คอลัมน์

echo "จำนวนคอลัมน์: " . $grid->getCols();  // 3

Constructor

$grid = new Grid();

Grid สืบทอดจาก \Kotchasan\Template จึงสามารถใช้ methods ของ Template ได้

Methods

setCols()

กำหนดจำนวนคอลัมน์

$grid->setCols($cols);

Returns: Grid instance (สำหรับ method chaining)

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

getCols()

ดึงจำนวนคอลัมน์

$cols = $grid->getCols();

Returns: int จำนวนคอลัมน์ปัจจุบัน

ตัวอย่างการใช้งาน

Basic Grid

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

// ใช้ร่วมกับ Template methods
$grid->setTemplate('<div class="grid-item">{CONTENT}</div>');

Responsive Grid

// กำหนด layout ตามขนาดหน้าจอ
$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 รองรับ fluent interface:

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

คลาสที่เกี่ยวข้อง

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