StellarAdmin

<sa-grid columns="2">
    <sa-input asp-for="FirstName" />
    <sa-input asp-for="LastName" />
    <sa-input asp-for="Email" column-span="full" description="We send the itinerary here." />
    <sa-input asp-for="Phone" />
    <sa-input asp-for="Departure" />
</sa-grid>

Usage

Wrap fields in <sa-grid> and set columns to the number of columns. Each field takes one column unless it sets its own span with column-span.

<sa-grid columns="2">
    <sa-input asp-for="FirstName" />
    <sa-input asp-for="LastName" />
    <sa-input asp-for="Email" column-span="full" />
</sa-grid>

The columns respond to the width of the grid rather than the viewport, so the same markup works in a page, a card or a side panel. columns applies once the grid is at least 40rem wide, and the grid uses one column below that.

Fields carry their own span: <sa-field>, every input that renders its own field, such as <sa-input asp-for="..."> or <sa-select asp-for="...">, and <sa-display-field> accept the column-span and column-start attributes. Wrap anything else, such as a Form Section or a Details list, in <sa-grid-item> to give it a span or a start.

Examples

Columns and spans

Use columns-base, columns-sm, columns-md and columns-lg to set the number of columns at the smallest width, 30rem, 40rem and 56rem; a width without a value uses the value of the next smaller width.

Set column-span to a number from 1 to 12, or to full to span every column. column-span-sm, column-span-md and column-span-lg set the span at each width in the same way. A width without a span uses the span of the next smaller width, and a span is limited to the number of columns at each width.

<sa-grid columns="3" columns-sm="2" columns-lg="4">
    <sa-input asp-for="FirstName" />
    <sa-input asp-for="LastName" />
    <sa-input asp-for="Email" column-span="2" />
    <sa-input asp-for="Departure" />
    <sa-input asp-for="Return" />
    <sa-select asp-for="Cabin" column-span-lg="2">
        <option value="economy">Economy</option>
        <option value="premium-economy">Premium Economy</option>
        <option value="business">Business</option>
    </sa-select>
    <sa-textarea asp-for="Notes" rows="3" column-span="full" />
</sa-grid>

Column start

Set column-start to the column a field starts at, from 1 to 12, to begin a new row or leave a gap. In this example the dates start a new row and the phone number leaves the first column empty. column-start-sm, column-start-md and column-start-lg set the start at each width, and auto places the field after the one before it again. A width without a start uses the start of the next smaller width. The start is ignored where the grid has one column or the field would extend past the last column, so the fields stack in a narrow grid.

<sa-grid columns="3">
    <sa-input asp-for="FirstName" />
    <sa-input asp-for="LastName" />
    <sa-input asp-for="Departure" column-start="1" />
    <sa-input asp-for="Return" />
    <sa-input asp-for="Phone" column-start="2" column-span="2" />
</sa-grid>

Inputs and display fields

Mix inputs, explicit fields and display fields in one grid. Each sets its own span, and display fields line up with the inputs beside them.

<sa-grid columns="3">
    <sa-display-field asp-for="Reference" />
    <sa-input asp-for="FirstName" />
    <sa-input asp-for="LastName" />
    <sa-display-field asp-for="Status">
        <sa-badge>@Model.Status</sa-badge>
    </sa-display-field>
    <sa-input asp-for="Email" column-span="2" />
    <sa-field column-span="full">
        <sa-field-label for="grid-display-note">Note for the traveller</sa-field-label>
        <sa-input id="grid-display-note" name="TravellerNote" />
        <sa-field-description>Shown on the itinerary.</sa-field-description>
    </sa-field>
</sa-grid>

Grid items

Use <sa-grid-item> to place other content in the grid with its own span. In this example an audit section spans two of three columns at 56rem and beside it a payment section takes the third. A <sa-grid-item> must be a direct child of <sa-grid>.

<sa-grid columns="3">
    <sa-input asp-for="FirstName" />
    <sa-input asp-for="LastName" />
    <sa-input asp-for="Phone" />
    <sa-input asp-for="SendConfirmation" column-span="full" />
    <sa-grid-item column-span="full" column-span-lg="2">
        <sa-form-section title="Audit" description="Maintained automatically." layout="FormSectionLayout.Stacked">
            <sa-details columns="2" columns-sm="2">
                <sa-display-field asp-for="CreatedAt" secondary="by @Model.CreatedBy" />
                <sa-display-field asp-for="UpdatedAt" secondary="by @Model.UpdatedBy" />
            </sa-details>
        </sa-form-section>
    </sa-grid-item>
    <sa-grid-item column-span="full" column-span-lg="1">
        <sa-form-section title="Payment" layout="FormSectionLayout.Stacked">
            <sa-details orientation="FieldOrientation.Horizontal">
                <sa-display-field asp-for="Total" />
                <sa-display-field asp-for="Paid" />
                <sa-display-field asp-for="Balance" />
            </sa-details>
        </sa-form-section>
    </sa-grid-item>
</sa-grid>

Narrow container

The same grid stacks its fields inside a narrow container.

<sa-grid columns="2">
    <sa-input asp-for="FirstName" />
    <sa-input asp-for="LastName" />
</sa-grid>

API Reference

`<sa-grid>`

Renders a <div> element around the grid, forwarding any global attributes to the outer element. Fields and display fields placed directly in the grid are each wrapped in a grid item.

Prop

Type

`<sa-grid-item>`

Renders a <div> element, forwarding any global attributes. It must be a direct child of <sa-grid>.

Prop

Type

Field spans and starts

<sa-field>, every input that renders its own field and <sa-display-field> accept the same column-span, column-span-sm, column-span-md, column-span-lg, column-start, column-start-sm, column-start-md and column-start-lg attributes. They apply when the field is a direct child of <sa-grid> or <sa-details> and are ignored elsewhere. An invalid value throws an exception when the page renders.

Grid

On this page