Grid

Updated:

The grid component enables developers to align elements into columns and rows, and many more layouts.

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.


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! Usage of background colors and bordering have been added to code examples for visual clarity only. You should most likely remove these styles when implementing the grid component for your specific needs.

The q2-grid component uses the current window to determine the viewport size. If your feature is rendering inside an extension/iframe, the breakpoints will be based on the iframe's size, not the whole browser. For example, the Landing Page in online banking has a max content width of 768px on desktop due to the presence of the side-rail menu (which has a width of 255px), while the Composable Dashboard page has a max content width of 1024px because the side-rail menu is not present there.

Landing page in online banking. The image depicts a max content viewport width of 768px.
Composable Dashboard page in online banking. The image depicts a max content viewport width of 1024px.

The breakpoint sizes for reference, are:

• Extra Small (xs): 480px+
• Small (sm): 768px+
• Medium (md): 992px+
• Large (lg): 1200px+
• Extra Large (xl): 1400px+

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>

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.

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