Grid Area

Updated:

Use as a positioned cell within a Grid layout.

q2-grid-area component(s) should always comprise the immediate children elements of a q2-grid component.


Slotted text content may inherit the alignment properties of the grid or grid area components, resulting in unexpected text alignment outcomes. To prevent this from occurring, use flebox or text-align properties within your slotted content's styling to control this behavior.


If you use the column-span attribute to span more columns than are available in the grid, the parent q2-grid component will automatically add additional columns to accommodate the q2-grid-area component. This behavior is intentional and allows for flexible grid layouts.


NOTE: While the amount of columns and rows you can examine in the code examples has been limited, q2-grid supports any number of columns and rows! The colored cells in the live example are styled for visual clarity only; that styling is intentionally excluded from the copied code snippet so you can copy the grid structure cleanly and apply your own styles.

Properties

Learn more about properties.

align

Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

columnSpan
column-span

Sets the column span amount of the grid area at the baseline viewport size.

columnStart
column-start

Sets the starting column of the grid area at the baseline viewport size.

justify

Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

lgAlign
lg-align

Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

lgColumnSpan
lg-column-span

Sets the column span amount of the grid area at the LG viewport size.

lgColumnStart
lg-column-start

Sets the starting column of the grid area at the LG viewport size. When set to auto, the grid area will automatically start at the first available column.

lgJustify
lg-justify

Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

lgRowSpan
lg-row-span

Sets the row span amount of the grid area at the LG viewport size.

lgRowStart
lg-row-start

Sets the starting row of the grid area at the LG viewport size. When set to auto, the grid area will automatically start at the first available row.

lgZIndex
lg-z-index

Sets the z-index of the grid area at the LG viewport size.

mdAlign
md-align

Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

mdColumnSpan
md-column-span

Sets the column span amount of the grid area at the MD viewport size.

mdColumnStart
md-column-start

Sets the starting column of the grid area at the MD viewport size. When set to auto, the grid area will automatically start at the first available column.

mdJustify
md-justify

Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

mdRowSpan
md-row-span

Sets the row span amount of the grid area at the MD viewport size.

mdRowStart
md-row-start

Sets the starting row of the grid area at the MD viewport size. When set to auto, the grid area will automatically start at the first available row.

mdZIndex
md-z-index

Sets the z-index of the grid area at the MD viewport size.

rowSpan
row-span

Sets the row span amount of the grid area at the baseline viewport size.

rowStart
row-start

Sets the starting row of the grid area at the baseline viewport size. When set to auto, the grid area will automatically start at the first available row.

smAlign
sm-align

Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

smColumnSpan
sm-column-span

Sets the column span amount of the grid area at the SM viewport size.

smColumnStart
sm-column-start

Sets the starting column of the grid area at the SM viewport size. When set to auto, the grid area will automatically start at the first available column.

smJustify
sm-justify

Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

smRowSpan
sm-row-span

Sets the row span amount of the grid area at the SM viewport size.

smRowStart
sm-row-start

Sets the starting row of the grid area at the SM viewport size. When set to auto, the grid area will automatically start at the first available row.

smZIndex
sm-z-index

Sets the z-index of the grid area at the SM viewport size.

xlAlign
xl-align

Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

xlColumnSpan
xl-column-span

Sets the column span amount of the grid area at the XL viewport size.

xlColumnStart
xl-column-start

Sets the starting column of the grid area at the XL viewport size. When set to auto, the grid area will automatically start at the first available column.

xlJustify
xl-justify

Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

xlRowSpan
xl-row-span

Sets the row span amount of the grid area at the XL viewport size.

xlRowStart
xl-row-start

Sets the starting row of the grid area at the XL viewport size. When set to auto, the grid area will automatically start at the first available row.

xlZIndex
xl-z-index

Sets the z-index of the grid area at the XL viewport size.

xsAlign
xs-align

Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

xsColumnSpan
xs-column-span

Sets the column span amount of the grid area at the XS viewport size.

xsColumnStart
xs-column-start

Sets the starting column of the grid area at the XS viewport size. When set to auto, the grid area will automatically start at the first available column.

xsJustify
xs-justify

Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to auto, the grid area will inherit this property from the parent q2-grid component.

xsRowSpan
xs-row-span

Sets the row span amount of the grid area at the XS viewport size.

xsRowStart
xs-row-start

Sets the starting row of the grid area at the XS viewport size. When set to auto, the grid area will automatically start at the first available row.

xsZIndex
xs-z-index

Sets the z-index of the grid area at the XS viewport size.

zIndex
z-index

Sets the z-index of the grid area at the baseline viewport size.

Development

Responsive Breakpoints

q2-grid-area uses the same breakpoint system as its parent q2-grid. The base props (column-start, column-span, row-start, row-span, justify, align, z-index) describe the cell's placement at the smallest viewport, and each breakpoint-prefixed prop (xs-*, sm-*, md-*, lg-*, xl-*) overrides placement at and above that breakpoint's minimum viewport width.

Breakpoint Prop prefix Applies at viewport width
Base(none)All widths (the foundation)
XSxs-≥ 480px
SMsm-≥ 768px
MDmd-≥ 992px
LGlg-≥ 1200px
XLxl-≥ 1400px

How responsive props cascade

Responsive props cascade from smaller breakpoints up to larger ones. A value set at one breakpoint applies to that breakpoint and to every larger breakpoint until a larger breakpoint overrides it. When a breakpoint prop is omitted, the grid area inherits the value from the nearest smaller breakpoint that was set, ultimately falling back to the base prop.

In the example below the highlighted area spans 1 column by default and 3 columns from MD (≥ 992px) and up. Because sm-column-span is not set, SM inherits the base span (1); because lg-column-span and xl-column-span are not set, LG and XL inherit the MD span (3). Resize your browser to watch the span change.

 
<div style="width: 100%;">
    <q2-grid
        columns="3"
        gap="compact"
    >
        <q2-grid-area
            column-span="1"
            md-column-span="3"
            ><div style="height: 50px; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area><div style="height: 50px; border: 1px solid black; background-color: #c9f0f8;"></div></q2-grid-area>
        <q2-grid-area><div style="height: 50px; border: 1px solid black; background-color: #c9f0f8;"></div></q2-grid-area>
    </q2-grid>
</div>

Complex Layout Examples

Tiled Layout using Overlapping, Z-Indexed Columns:

 
<div style="width: 33.33%; height: 33.33%; aspect-ratio: 1 / 1;">
    <q2-grid
        columns="12"
        rows="12"
        gap="none"
    >
        <q2-grid-area
            column-start="1"
            column-span="1"
            row-start="1"
            row-span="1"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="4"
            column-span="2"
            row-start="1"
            row-span="1"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="8"
            column-span="2"
            row-start="1"
            row-span="1"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="12"
            column-span="1"
            row-start="1"
            row-span="1"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="1"
            column-span="1"
            row-start="4"
            row-span="2"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="4"
            column-span="2"
            row-start="4"
            row-span="2"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="8"
            column-span="2"
            row-start="4"
            row-span="2"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="12"
            column-span="1"
            row-start="4"
            row-span="2"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="1"
            column-span="1"
            row-start="8"
            row-span="2"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="4"
            column-span="2"
            row-start="8"
            row-span="2"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="8"
            column-span="2"
            row-start="8"
            row-span="2"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="12"
            column-span="1"
            row-start="8"
            row-span="2"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="1"
            column-span="1"
            row-start="12"
            row-span="1"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="4"
            column-span="2"
            row-start="12"
            row-span="1"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="8"
            column-span="2"
            row-start="12"
            row-span="1"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="12"
            column-span="1"
            row-start="12"
            row-span="1"
            z-index="1"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #02b3d8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="1"
            column-span="4"
            row-start="1"
            row-span="4"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c9f0f8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="5"
            column-span="4"
            row-start="1"
            row-span="4"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c9f0f8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="9"
            column-span="4"
            row-start="1"
            row-span="4"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c9f0f8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="1"
            column-span="4"
            row-start="5"
            row-span="4"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c9f0f8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="5"
            column-span="4"
            row-start="5"
            row-span="4"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c9f0f8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="9"
            column-span="4"
            row-start="5"
            row-span="4"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c9f0f8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="1"
            column-span="4"
            row-start="9"
            row-span="4"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c9f0f8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="5"
            column-span="4"
            row-start="9"
            row-span="4"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c9f0f8;"></div
        ></q2-grid-area>
        <q2-grid-area
            column-start="9"
            column-span="4"
            row-start="9"
            row-span="4"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c9f0f8;"></div
        ></q2-grid-area>
    </q2-grid>
</div>

Patterns

Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.

Full-page patterns

  • Account Details Page

    How to build an Account Details page in Tecton: a sortable, filterable transaction list with client-side search, column sorting, and pagination.

  • Account Settings Page

    How to build an Account Settings page in Tecton: six independent settings sections covering nickname, notifications, statement delivery, card management, spending limits, and overdraft protection.

  • Bank Statement Page

    How to build a Bank Statement page in Tecton: a computed account summary and a q2-data-table of transactions for a statement period.

  • Message Center Page

    How to build a Message Center page in Tecton: a two-panel layout with a message list on the left and a selected message detail plus response form on the right.

  • Profile Page

    How to build a Profile page in Tecton: required-field validation for personal information, real-time cross-field password validation, and plain integration toggles.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-grid-area component.

No results

Changelog

The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.

Show changelog (5)