Grid

Introduction

Grid places child components in a CSS grid with a fixed column count. Use it for two-up field pairs, metric tiles, or any mixed controls that should align in columns. Nest grids inside sections or at the top of a schema.

app/orbit/schemas/grid_basic.py

from almasix.orbit.schemas import Grid
from almasix.orbit.forms import TextInput

Grid.make()
    .columns(2)
    .schema([
        TextInput.make("col_a"),
        TextInput.make("col_b"),
    ])

Columns

.columns(n) sets the track count. The default is 2 when you don’t call it:

app/orbit/schemas/grid_columns.py

Grid.make().columns(1).schema([...])  # single column stack
Grid.make().columns(3).schema([...])  # three-up metrics / fields

Rendered chrome uses or-grid or-grid-cols-N.

Grid container

.grid_container() adds or-grid-container when the grid should establish its own containing block for nested column spans:

app/orbit/schemas/grid_container.py

Grid.make()
    .columns(3)
    .grid_container()
    .schema([...])

Dense and gap

Shared layout helpers tighten or remove gutters — same API as Flex and other layouts:

app/orbit/schemas/grid_dense.py

Grid.make().columns(2).dense().gap(False).schema([...])
Grid.make().columns(2).gap("sm").schema([...])

Also available: .defer_loading() for async chrome — see Layouts and Schemas overview.

Composition tip

Pair a grid with a section when you want a titled block of columns:

app/orbit/schemas/grid_in_section.py

from almasix.orbit.schemas import Section, Grid
from almasix.orbit.forms import TextInput, Select

Section.make("contact").heading("Contact").schema([
    Grid.make().columns(2).schema([
        TextInput.make("email"),
        Select.make("preferred").options({"email": "Email", "phone": "Phone"}),
    ]),
])

API reference

Method	Role
.columns	Number of columns
.grid_container	Add container chrome class
.schema	Child components
.dense / .gap / .defer_loading	Shared layout helpers