GridContainer

ic.GridContainer is a two-dimensional layout container built on CSS Grid. It arranges children into columns and rows, with control over track sizing, cell alignment, and auto-placement. Use it when you need a proper grid rather than a single-axis flex layout.

Columns and rows

Columns and Rows define the track sizes using CSS grid-template syntax. Common patterns include equal columns with "1fr 1fr 1fr", mixed fixed and flexible tracks like "200px 1fr", and repeat() for repeated patterns. Rows defaults to "auto", which means rows are created as needed and sized to fit their content.

Alignment

AlignItems positions children vertically within their grid cells. JustifyItems positions them horizontally. Both default to stretch, which makes children fill their cell entirely. Switching to start, center, or end lets children take their natural size and sit at that edge of the cell.

Auto flow

AutoFlow controls how the grid places items that don’t have an explicit position. row fills across each row before moving to the next (the default). column fills down each column instead. The dense variants try to fill earlier gaps when smaller items leave holes, which is useful for dashboards with mixed-size tiles.

Gap and padding

Gap sets the spacing between grid cells. Padding adds internal space around the entire grid. Both accept a pixel number or a CSS string like "8px 16px" for different row and column gaps.

Custom styling

Like FlexContainer, GridContainer has minimal CSS: just display: grid on .ic-grid. This example uses a 1px gap with a matching background color to create visible cell dividers, turning the grid into a dashboard-style panel.

g = ic.GridContainer();
g.Columns = "2fr 1fr";
g.Rows = "80px 80px";
g.Gap = 1;

% Dashboard panel with visible cell dividers
g.css.style(".ic-grid", ...
    "border", "1px solid #e2e8f0", ...
    "border_radius", "8px", ...
    "overflow", "hidden", ...
    "background_color", "#e2e8f0");