Grid Area

Updated:

The grid area component allows you to position and size a content area nested within a q2-grid component. Grid areas can span multiple columns and rows within a grid and can even overlap other grid area components.

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! 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

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>

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.

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

No results