Grid

Updated:

Use for responsive grid layouts with flexible rows and columns.

Properties

Learn more about properties.

align

Sets the vertical alignment behavior of q2-grid-area components within a grid track at the baseline viewport size.

columns

Sets the amount of columns to render within the grid at the baseline viewport size.

gap

Sets the gap size between rows and columns within the grid at the baseline viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.

justify

Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the baseline viewport size.

lgAlign
lg-align

Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'LG' viewport size.

lgColumns
lg-columns

Sets the amount of columns to render within the grid at the 'LG' viewport size.

lgGap
lg-gap

Sets the gap size between rows and columns within the grid at the 'LG' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.

lgJustify
lg-justify

Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'LG' viewport size.

lgRows
lg-rows

Sets the amount of rows to render within the grid at the 'LG' viewport size. When set to auto, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.

mdAlign
md-align

Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'MD' viewport size.

mdColumns
md-columns

Sets the amount of columns to render within the grid at the 'MD' viewport size.

mdGap
md-gap

Sets the gap size between rows and columns within the grid at the 'MD' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.

mdJustify
md-justify

Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'MD' viewport size.

mdRows
md-rows

Sets the amount of rows to render within the grid at the 'MD' viewport size. When set to auto, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.

rows

Sets the amount of rows to render within the grid at the baseline viewport size. When set to auto, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.

smAlign
sm-align

Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'SM' viewport size.

smColumns
sm-columns

Sets the amount of columns to render within the grid at the 'SM' viewport size.

smGap
sm-gap

Sets the gap size between rows and columns within the grid at the 'SM' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.

smJustify
sm-justify

Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'SM' viewport size.

smRows
sm-rows

Sets the amount of rows to render within the grid at the 'SM' viewport size. When set to auto, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.

xlAlign
xl-align

Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'XL' viewport size.

xlColumns
xl-columns

Sets the amount of columns to render within the grid at the 'XL' viewport size.

xlGap
xl-gap

Sets the gap size between rows and columns within the grid at the 'XL' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.

xlJustify
xl-justify

Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'XL' viewport size.

xlRows
xl-rows

Sets the amount of rows to render within the grid at the 'XL' viewport size. When set to auto, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.

xsAlign
xs-align

Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'XS' viewport size.

xsColumns
xs-columns

Sets the amount of columns to render within the grid at the 'XS' viewport size.

xsGap
xs-gap

Sets the gap size between rows and columns within the grid at the 'XS' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.

xsJustify
xs-justify

Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'XS' viewport size.

xsRows
xs-rows

Sets the amount of rows to render within the grid at the 'XS' viewport size. When set to auto, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.

Development

Responsive Breakpoints

q2-grid is mobile-first. The base props (columns, rows, gap, justify, align) describe the layout at the smallest viewport, and each breakpoint-prefixed prop (xs-*, sm-*, md-*, lg-*, xl-*) overrides the layout 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 inherits the value from the nearest smaller breakpoint that was set, ultimately falling back to the base prop.

In the example below the grid renders 1 column by default, 2 columns from MD (≥ 992px), and 4 columns from LG (≥ 1200px). Because sm-columns is not set, SM inherits the base value (1 column); because xl-columns is not set, XL inherits the LG value (4 columns). Resize your browser to watch the column count change.

 
<div style="width: 100%;">
    <q2-grid
        columns="1"
        md-columns="2"
        lg-columns="4"
        gap="compact"
    >
        <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-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

Masonry Layout:

 
<div style="width: 100%; height: 20%; aspect-ratio: 5 / 1; border: 1px solid black; background-color: #ffcac9">
    <q2-grid
        rows="3"
        gap="compact"
    >
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
        <q2-grid-area column-span="2"
            ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cc5f5d"></div
        ></q2-grid-area>
    </q2-grid>
</div>

Mosaic Tile Layout using Nested Grids:

 
<div style="width: 66.66%; height: 66.66%; aspect-ratio: 1 / 1; background-color: #e9e1d4;">
    <q2-grid
        columns="2"
        rows="2"
        gap="compact"
    >
        <q2-grid-area>
            <div style="height: 100%; background-color: #c5b59f;">
                <q2-grid
                    columns="4"
                    rows="4"
                    gap="compact"
                >
                    <q2-grid-area
                        column-start="1"
                        column-span="2"
                        row-start="1"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c6bba8;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="2"
                        row-start="1"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #d9d4c8;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="1"
                        column-span="2"
                        row-start="2"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #ad9d87;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="1"
                        row-start="2"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #b7a791;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="4"
                        column-span="1"
                        row-start="2"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #e8e0d5;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="1"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #beafa0;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="2"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cdc4b1;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="1"
                        row-start="3"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #d0bfac;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="4"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #dad5c9;"></div
                    ></q2-grid-area>
                </q2-grid>
            </div>
        </q2-grid-area>
        <q2-grid-area>
            <div style="height: 100%; background-color: #c5b59f;">
                <q2-grid
                    columns="4"
                    rows="4"
                    gap="compact"
                >
                    <q2-grid-area
                        column-start="1"
                        column-span="2"
                        row-start="1"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c6bba8;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="2"
                        row-start="1"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #d9d4c8;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="1"
                        column-span="2"
                        row-start="2"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #ad9d87;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="1"
                        row-start="2"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #b7a791;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="4"
                        column-span="1"
                        row-start="2"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #e8e0d5;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="1"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #beafa0;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="2"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cdc4b1;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="1"
                        row-start="3"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #d0bfac;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="4"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #dad5c9;"></div
                    ></q2-grid-area>
                </q2-grid>
            </div>
        </q2-grid-area>
        <q2-grid-area>
            <div style="height: 100%; background-color: #c5b59f;">
                <q2-grid
                    columns="4"
                    rows="4"
                    gap="compact"
                >
                    <q2-grid-area
                        column-start="1"
                        column-span="2"
                        row-start="1"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c6bba8;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="2"
                        row-start="1"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #d9d4c8;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="1"
                        column-span="2"
                        row-start="2"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #ad9d87;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="1"
                        row-start="2"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #b7a791;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="4"
                        column-span="1"
                        row-start="2"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #e8e0d5;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="1"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #beafa0;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="2"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cdc4b1;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="1"
                        row-start="3"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #d0bfac;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="4"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #dad5c9;"></div
                    ></q2-grid-area>
                </q2-grid>
            </div>
        </q2-grid-area>
        <q2-grid-area>
            <div style="height: 100%; background-color: #c5b59f;">
                <q2-grid
                    columns="4"
                    rows="4"
                    gap="compact"
                >
                    <q2-grid-area
                        column-start="1"
                        column-span="2"
                        row-start="1"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #c6bba8;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="2"
                        row-start="1"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #d9d4c8;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="1"
                        column-span="2"
                        row-start="2"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #ad9d87;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="1"
                        row-start="2"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #b7a791;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="4"
                        column-span="1"
                        row-start="2"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #e8e0d5;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="1"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #beafa0;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="2"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #cdc4b1;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="3"
                        column-span="1"
                        row-start="3"
                        row-span="2"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #d0bfac;"></div
                    ></q2-grid-area>
                    <q2-grid-area
                        column-start="4"
                        column-span="1"
                        row-start="4"
                        row-span="1"
                        ><div style="width: 100%; height: 100%; border: 1px solid black; background-color: #dad5c9;"></div
                    ></q2-grid-area>
                </q2-grid>
            </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 component.

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 (4)