TCoreGridPanel

Overview

TCoreGridPanel provides a flexible grid layout system that adapts to different screen sizes. It uses CSS Grid at runtime for optimal performance and responsive behaviour. At design time, it displays cells with color-coding and position indicators.

Unit & Inheritance

UNIT Obj.Container.GridPanel;

TCoreGridPanel = CLASS(TCoreDiv)
   // Inherits from TCoreDiv for CSS class support

Key Concepts

Rows and Columns

The grid is defined by RowCollection and ColumnCollection. Each row/column can specify:

• SizeStyle - ssPercent (proportional) or ssAbsolute (fixed pixels)
• Value - The size value (percentage or pixels)
• Alignment - How content is aligned within cells
• Margins - Spacing around cells

Cells

Cells are automatically created as TSubCoreDiv components based on the grid dimensions. Access cells using GetCell(ColIndex, RowIndex). Drop controls onto cells at design time - they become children of that cell.

Responsive Layouts

The Layout collection defines breakpoints for different viewport widths. Each layout specifies a CSS grid-template-columns value that determines how many columns appear at that breakpoint.

Published Properties

Column/Row Collection Item Properties

TCoreGridPanelColumn Properties

TCoreGridPanelRow Properties

Responsive Layout Item Properties

Public Methods

Returns the cell component at the specified column and row index. Returns nil if indices are out of range.

Returns the total number of cells in the grid (Rows × Columns).

Re-aligns all child controls within their cells according to the column/row alignment settings. Called automatically on resize.

Default Layouts

When you drop a TCoreGridPanel on a form, it creates three default responsive layouts:

Design-Time Behaviour

At design time:

• Cells are color-coded with alternating pastel colors for visibility
• Cell indices [col,row] are displayed in the top-left corner of each cell
• Dotted grid lines show cell boundaries (or solid lines if GridLineWidth > 0)
• A drag handle appears at top-left for dragging the entire panel
• Drop controls onto cells to make them children of that cell

At runtime, cell colors become transparent and indices are hidden.

Usage Examples

Basic Setup - 2x2 Grid

// In Form Designer or code:
GridPanel1.RowCollection.Clear;
GridPanel1.ColumnCollection.Clear;

// Add 2 rows
GridPanel1.RowCollection.Add.Value := 50;  // 50%
GridPanel1.RowCollection.Add.Value := 50;  // 50%

// Add 2 columns
GridPanel1.ColumnCollection.Add.Value := 50;  // 50%
GridPanel1.ColumnCollection.Add.Value := 50;  // 50%

Accessing Cells

VAR
   Cell: TSubCoreDiv;
BEGIN
   // Get cell at column 1, row 0
   Cell := GridPanel1.GetCell(1, 0);
   
   IF Assigned(Cell) THEN
      BEGIN
         // Add a label to the cell
         MyLabel.Parent := Cell;
      END;
END;

Custom Responsive Layouts

// Clear default layouts
GridPanel1.Layout.Clear;

// Mobile: single column
WITH GridPanel1.Layout.Add DO
   BEGIN
      Width       := 480;
      Style       := '1fr';
      ColumnGap   := '8px';
      RowGap      := '8px';
      Description := 'Mobile';
   END;

// Tablet: 2 columns with fixed sidebar
WITH GridPanel1.Layout.Add DO
   BEGIN
      Width       := 1024;
      Style       := '250px 1fr';
      ColumnGap   := '16px';
      RowGap      := '16px';
      Description := 'Tablet';
   END;

// Desktop: 3 columns
WITH GridPanel1.Layout.Add DO
   BEGIN
      Width       := 0;  // Default (largest)
      Style       := '250px 1fr 300px';
      ColumnGap   := '20px';
      RowGap      := '20px';
      Description := 'Desktop';
   END;

Responding to Layout Changes

PROCEDURE TMainForm.GridPanel1LayoutChange(Sender: TObject; 
   ALayout: TResponsiveLayoutItem);
BEGIN
   IF ALayout.Description = 'Mobile' THEN
      BEGIN
         // Hide sidebar content on mobile
         SidebarPanel.Visible := False;
      END
   ELSE
      BEGIN
         SidebarPanel.Visible := True;
      END;
END;

Fixed + Proportional Columns

// Create a layout with fixed sidebar and flexible content
GridPanel1.ColumnCollection.Clear;

// Fixed 200px sidebar
WITH GridPanel1.ColumnCollection.Add DO
   BEGIN
      SizeStyle := ssAbsolute;
      Value     := 200;
   END;

// Flexible content area (takes remaining space)
WITH GridPanel1.ColumnCollection.Add DO
   BEGIN
      SizeStyle := ssPercent;
      Value     := 100;
   END;

CSS Classes

TCoreGridPanel applies the CSS class core-grid-panel to itself. Cells can be styled via their ElementClassName property.

Cell Styling

Cells are TSubCoreDiv components. By default they use flex layout with alignment based on column/row settings. To override:

• Set the cell's ElementClassName to apply custom CSS
• Set the cell's ChildLayout to override the default flex layout

See Also

• TMultiContainer - Page layout container
• TCoreDiv - Base component class
• TDom - DOM access utilities
• TDashboardCanvas - Dashboard card layout